Coding/Redux11 Redux - immutable - Next tutorial(1) Redux - immutable - Next tutorial을 하면서 우선 counter를 할 수 있는 페이지를 만들었다. 폴더 구성은 다음과 같이 하였다. - components 디렉토리는 페이지를 구성하고 있는 component를 만들도록 했다. - containers 디렉토리는 redux와 연결해서 상태관리를 하는 component 이다. - pages 디렉토리는 각 페이지를 나타낸다. - redux 디렉토리는 중앙집체 상태 관리를 할 수 있도록 redux에 필요하는 action, reducer, store를 만드는 곳이다. Next.js 에서 제공하는 Link component를 활용해서 page를 분기했다. Home 페이지 구조는 다음과 같이 만들었다. Head를 따로 뺄 수 있지만, 내용이 작.. 2021. 1. 1. Redux - immutable - Next Tutorial 나갈 수 있는 곳도 없고... 코딩 공부도 해야돼서 ㅎㅎ 회사에서 사용하는 라이브러리 공부를 하게 되었다. - Redux는 상태관리를 중압집권체제 형태를 따르기 때문에 상태관리의 복잡성을 없애고 상태를 예측가능하기에 나중에 유지보수 측면에서 좋다. - immutable.js는 객체나 배열 관리를 immutable(불변의) 상태로 관리하도록 도와주는 라이브러리다. Redux를 사용한다면 상태를 관리할때 객체나 배열을 immutable하게 관리해야기 때문에(최적화를 하기 위해서) 도움이 되는 라이브러리다. - Next.js는 처음 공부할 때 이해한 내용은 javascript가 render 되기전에 html 태그를 먼저 불러와서 정적인 페이지 로딩이 빠르고, SSR(server side render)를 하기 .. 2021. 1. 1. React - Redux Redux는 React 라이브러리 단점을 보완하기 위해 만들어진 라이브러리(독립적인 라이브러리-react가 없이도 사용이 가능하다) -예측가능한 상태 저장소(a predictable state container for javascript app) -스토어에 데이터를 넣는 유일한 방법(Reducer 메소드를 이용해서...)(보안, 안전 up) => 복잡성을 낮추고 예측이 가능한 상태관리를 할 수 있도록 해주는 라이브러리 만약 하기 그림처럼 제일 왼쪽 하단에서 state를 변경해서 제일 오른쪽 하단에 전달을 한다면 이렇게 state 리프트를 사용해서 root까지 끌어 올려서 state를 전달을 해야한다. 이런한 복잡성을 없애주는 라이브러리가 Redux이다. Redux는 state를 관리해주는 control .. 2020. 8. 9. 이전 1 2 3 다음 반응형
