728x90 반응형 SMALL 분류 전체보기37 [Next.js] next.js 알아보기 Next.js란? https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Vercel에서 만든 React의 SSR(서버 사이드 렌더링) 프레임 워크입니다. 개발자가 서버사이드 렌더링에 대한 고려를 직접 하지 않아도 된다는 장점을 가지고 있습니다. 그리고 정적 사이트를 만들 수 있습니다. 특별한 설정 없이 쉽게 사용할 수 있기에 많은 개발자들이 선호하는 프.. 2022. 7. 30. [Redux] 리덕스 Redux란? 리액트 생태계에서 가장 사용률이 높은 상태 관리 라이브러리입니다. 리덕스를 이용하면 컴포넌트의 상태 관련 로직을 다른 파일로 분리시켜서 효율적인 관리에 도움을 줍니다. Context API와 useReducer를 사용하여 개발하는 것과 방식이 비슷합니다. Context API가 개선되기 전에 글로벌 상태 관리를 위해 많이 사용되어 왔었습니다. 리덕스를 사용하면 좋을 때 프로젝트의 규모가 클 때 비동기 작업을 자주 할 때 리덕스가 편할 때 Redux Action 상태에 변화가 필요하게 될 때, 액션을 발생시기게 됩니다. 액션 생성자를 통해 액션을 만듭니다. 액션 객체를 리덕스 스토어로 보냅니다. 리덕스 스토어가 액션 객체를 받으면 스토어 상태값이 변경됩니다. 변경된 상태값에 의해 상태를 이용.. 2022. 7. 27. [React] Context API Context 일반적으로 데이터를 여러 컴포넌트들에 전해줘야 하는 props의 경우 사용이 번거로울 수 있습니다. 리액트의 Context API를 사용하면 프로젝트 내에 전역적으로 사용할 수 있는 값을 관리할 수 있습니다. 다시 말해, Context를 사용하면 일일이 props를 넘겨주지 않아도 컴포넌트 전체에 데이터를 제공할 수 있습니다. 데이터 다루기 HumanContext.js import React from 'react'; const HumanContext = React.createContext(); export default HumanContext; index.js import React from "react"; import ReactDOM from "react-dom"; import "./in.. 2022. 7. 26. [React] Additional Hooks useReducer 복잡한 정적 로직을 만드는 경우 사용. 다음 state기 이전 state에 의존적인 경우에 사용. Redux를 알면 쉽게 사용할 수 있음. import { useReducer } from 'react'; const reducer = (state, action) => { if (action.type === 'PLUS') { return { count: state.count + 1 }; } return state; } function ExReducer() { const [state, dispatch] = useReducer(reducer, {count: 0}); // 첫번째 인자로 함수가 들어감. return ( {state.count} ClickButton! ); function cli.. 2022. 7. 25. 이전 1 2 3 4 5 6 7 ··· 10 다음 728x90 반응형
