slow 개발 일지

이전 포스팅 Redux와 Ducks Pattern에 연장성으로 React Context API 에 대해 알아보자. React Context react 16.3 버전부터, context api를 내장하여 정식적으로 지원한다. 모든 컴포넌트에서 접근가능한 전역상태를 생성하여, props를 일일이 전달해야하는 props-drilling을 보완할 수 있다. (props-drilling : Redux와 Ducks Pattern 참고) Context의 주요 개념은 context, context provider, context consumer 정도로 보면 된다. 1. createContext 전역상태를 저장하는 context 생성 2. provider 리액트 컴포넌트 전역 상태의 데이터를 초기화 전역 상태를 하위 컴..

Redux react는 상태를 자식 컴포넌트로 전달, 전달하는 방식으로, 전달의 단계가 많아진다면 상당히 복잡한 구조가 되고, 리소스 낭비가 되곤한다. 이런 전달의 구조가 깊어지는 것을 props-drilling이라고 부른다. 이런 props-driliing을 해소하기 위해, 전역에서 상태관리가 가능한 여러방법들이 존재한다. context api, redux, mobx ,, 등 여러가지 방법이 있는데, 이 방법 중, 우리나라에서 가장 사용률이 높은 redux에 관해 살펴보자. redux는 전역 상태 저장소(store)를 제공한다. react의 모든 컴포넌트는 이 store에 접근 가능하다. 위의 그림과 같이 redux를 사용하게 되면, Store를 통해 상태의 관계를 맺게 되기 때문에, 좀 더 편한 상태..

react hook(react 16.8 이상)이 나오기 전에는 , 리액트의 라이프사이클을 활용하기 위해 Class Component를 사용해야 했다. 나 또한, Class Component를 통해 리액트 개발을 해왔다. Class Component로 개발하다보면, 별거아닌 코드도 길고 거창해지기 마련이다. 또한, 라이프사이클을 잘못 건들면 어느순간 뒤엉켜 머리가 아파진다 ,, 특히, react hook을 활용하면 라이프사이클이 좀더 폐쇄적으로 관리되기 때문에, 이런 라이프사이클의 뒤엉킴에 있어서는 좀 더 안전한 듯하다. React hook을 활용하여 Function Component 개발은 당연해졌고, React에서도 공식적으로 Function Component를 권장하고 있다. 워낙 리액트 문서가 한글..