상태관리란 참 어려운거 같다..
마지막 프로젝트를 진행하며 recoil과 react-query를 사용했었는데, 사실 전에 사용했던 redux에 대한 이해도 아직 많이 떨어지는 것 같음 ㅠㅠ.. 다시 정리해보자
Redux
- redux는 자바스크립트 전연상태관리 라이브러리다.
Redux는 크게 Store, Reducer, Action으로 설명할 수 있다.
Store
는 저장소, 즉 전역상태를 저장하는 공간이다. 자바스크립트 객체 형태로 저장되어 있으며, 오직 Reducer를 통해서만 접근할 수 있다. 보통은 최상단의 index.js에 정의한다. 여러개의 Context를 만들 수 있는 Context API와는 다르게 Redux에서 Store는 1개만 존재할 수 있다.
Action
은 Reducer에게 보내는 Store에 대한 행동을 정의하는 자바스크립트 객체이다. 우리는 상태에 어떤 변화가 필요할 때, 액션을 발생시킨다. "이렇게 상태를 변경해줘~" 라고 하는 어떤 주문서의 역할을 한다고 보면 이해가 쉽다.
Action을 Reducer에게 전달하기 위해서는 dispatch 메소드를 사용해야한다. dispatch는 Store의 내장 함수 중 하나인데, 액션 객체를 넘겨줘서 상태를 업데이트한다. 이벤트를 일어나게하는 이벤트 트리거의 역할을 한다.
Reducer
는 이전 상태와 액션을 받아, 다음 상태를 반환하는 역할을 하는 순수 함수이다. Reducer를 통해서만 전역 상태를 변경하고 업데이트할 수 있다. 어떤 액션이 들어오는지 그 유형에 따라 이벤트를 처리하는 이벤트 리스너라고 볼 수 있다. 여기서 중요한 점은, 이전 상태를 변경한다는 점이 아니라, 새로운 상태 객체를 생성해서 반환해야한다는 사실이다.
- redux는 Action -> Dispatch -> Store -> View로 단방향 패턴을 따른다. (flux패턴이라고함)
상태관리 라이브러리에는 redux외에도 여러가지가 있는데 그중 몇가지를 같이 알아보자!!!
React Context API
Recoil
- react전용 상태관리 라이브러리.
구조
Recoil에서 제일 핵심되는 개념은 atom 이다. atom은 recoil에서 상태(state)를 나타내며, 컴포넌트들이 구독할수 있는 단위이다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. atom에 변화가 있으면 구독하는 모든 컴포넌트가 재렌더링된다.
action → dispatch → reducer → view 의 흐름을 가지는 redux와 달리
atom → selector → view 의 data-flow를 가진다.
사용법
atom을 생성할때 useRecoilState라는 훅을 사용하는데, 이는 react의 useState와 비슷하지만 상태가 컴포넌트간에 공유될 수 있다는 차이점이 있다.
Redux의 상태관리 개념은 크게 Store, Reducer, Action으로 설명할 수 있습니다.
먼저 Store는 저장소, 즉 전역상태를 저장하는 공간입니다. 자바스크립트 객체 형태로 저장되어 있으며,
redux는 단방향 통신인 flux패턴을 따르기 떄문에 오직 Reducer를 통해서만 접근할 수 있습니다.
Action은 Reducer에게 보내는 Store에 대한 행동을 정의하는 자바스크립트 객체이고,
Action을 Reducer에게 전달하기 위해서는 store의 내장함수인 dispatch 메소드를 사용해야하고 dispatch는 액션 객체를 reducer에게 넘겨줘서 이벤트를 일어나게하는 이벤트 트리거의 역할을 한다.
마지막으로 reducer는 이전 상태와 액션을 받아, 다음 상태를 반환하는 역할을 하는 순수 함수이며, 상태의 불변성을 유지하기위해 .이전 상태를 변경하는것이 아니라, 새로운 상태 객체를 생성해서 반환합니다. (-> Redux를 사용하는 이유중 하나가 히스토리 관리가 가능하기 떄문이기떄문에 )
