React에서의 상태관리의 필요성을 느낄 때는 언제인가
일단 React는 state를 props로 넘겨 받으면서 data를 공유한다.
setState로 data를 수정하고 리렌더링 되어진다.
근데 이 과정이 많아지고 프로젝트의 크기가 커지면,
상태관리의 필요성이 더욱 부각되어진다.
React가 렌더링 되는 조건이 있는데 살펴보도록 하자.
- state가 변경되어질 때
- props가 변경될 때
- 부모 컴포넌트가 렌더링 될 때 등등..
리액트로만 작업하면 컴포넌트들은 local state 와 global state가 렌더링 될 때 다시 렌더링 된다.
이런 과정에서 불필요한 렌더링이 발생하는데 프로젝트가 커지면 성능 손실이 크게 발생할 수 있고 오류 발생 시 추적하기가 힘들어진다.
그래서 상태를 관리해주는 라이브러리가 필요하다.
일단 첫번째로는 Redux를 알아보겠다.
Redux는 application 전체 상태를 편하게 관리, 사용하게 하는 라이브러리이다.
복잡한 data flow를 개선해주고 불필요한 렌더링을 없애주는 장점이 있다.
Redux 구조
구조에는
state: store에 저장된 값,
action: store에 저장된 값을 변경시키는 방식,
reducer: action, 이전 state를 받아서 새로운 state로 변경시키는 함수,
store: state등을 저장하는 장소,
dispatch,
selector등이 있고,
상태 직접 변경이 아니라 action을 통해 변경시키는데 이걸 바탕으로 reducer 함수로 rootReducer에 합친 후 store에 저장한다. 그 후 provider로 store에 접근하여,
useDispatch, useSelector로 코딩을 하면 된다.
zustand 구조
useStore를 사용하고 state를 useStore에 저장하여 필요할때 각 컴포넌트에 가져다가 쓰면 된다! redux처럼 초반에 셋팅해야하는 작업이 훨씬 줄어들고 디버깅도 쉽다고 들었다. 재사용도 편한 것 같다. 중앙집권적이지 않은 듯한 느낌이다.
