Today I Learned
useReducer vs useState
The useReducer hook is usually recommended when the state becomes complex, with state values depending on each other or when the next state depends on the previous one.
사실 여태까지 useState를 쓰면서 state가 많아지고, 서로 다른 state를 서로 참조하여 값을 변경하는 등의 로직을 쓰다보니 복잡하다고 느껴질때가 많았다. 이 때, useState 대신 useReducer hook을 사용하면, 디버깅도 좀더 심플하게 할 수 있고, 코드의 복잡성 또한 줄일 수 있다. 그러나 정답은 없다. useState, useReducer 중에 뭘쓸지는 상황에 따른 선택이다. 이 때 useReducer는 redux와 비슷해보이지만, 다르다. redux는 전역에서 initialState를 다이렉트로 받아와서 쓸 수 있지만, useReducer는 캡슐화, initialState로 모든 state를 하나로 관리한다는 점에서 redux와 유사하지만, 전역에서 다이렉트로 state를 받을 수 없고, props로 하나하나 내려줘야한다(이 때, 이를 보완하기 위한 것이 context API 이다).
** 참고 블로그 :
1) https://www.google.com/amp/s/jsramblings.com/should-you-switch-to-usereducer-or-is-usestate-enough-for-your-needs/amp/
2) https://react.vlpt.us/basic/20-useReducer.html
useReducer with Context API
이 두조합을 직접 사용해보니 사실상 redux를 단 5분? 정도면 습득할만한 기술로 흉내낼 수 있었다. 즉, 전역으로 상태를 가져다 쓸 수 있었다. 그러나, 리덕스와 달리 useContext로 특정한 context를 가져다 쓰는 즉, Provdier 하위에 있는 컴포넌트 중에 useContext로 해당 Provide의 value를 가져다 쓰는 컴포넌트는 value값이 업그레이드 되면 단지 조회를 한다는 이유로 모두 리렌더링이 됐다. 이건 리덕스와 다르다. 리덕스는 예를 들어, 특정 컴포넌트가 리덕스 state 중에 a를 참조한다고 할 때, a값이 변할 때만 리렌더링이 일어난다. 그러나, context API를 통해 참조를 하면, value가 변하기만하면 이를 useContext로 참조하고 있는 모든 컴포넌트가(a state가 아닌 b state만 참조한다고 하더라도) 리렌더링된다. 이는 확실히 리소스 낭비다. 물론 리렌더링이라고 해서 실제로 모든 DOM(react안의 jsx로 표현된 dom)을 브라우저가 리렌더링하지는 않는다. 어차피 리액트 내부에서 리렌더링이 activated되면 이전 V dom과 현재 V dom을 비교해서 다른 부분만 리렌더링하도록 DOM API를 호출하기 때문에 실제로 변화된 부분만 리렌더링할 것이다. 하지만 여기서 의미하는 리렌더링 최적화는 리액트 내부에서 V DOM과 V DOM을 비교하는 로직을 수행하는지의 여부다. 또한, 컴포넌트가 리렌더링된다는 것은 함수(컴포넌트) 내부의 변수, 함수 등을 다시 생성한다는 의미이기 때문에 이또한 리소스가 사용되는 부분이다. 사실 이미 REDUX를 적용한 프로젝트에서 Context API를 굳이 사용하는 것은,, 솔직히 근거를 찾기 쉽지 않을 것 같다..
