[React] 리액트 상태관리

📄 리액트 상태관리

상태(state)란, 웹 애플리케이션을 렌더링 하는데 있어 영향을 미칠 수 있는 값입니다.

상태 즉, State 관리는 지역상태와 전역상태가 있습니다.

props를 통해서 데이터를 전달하면 지역상태, 다른 저장소에서 데이터를 불러오면 전역 상태입니다.

보통 전역 상태로 핸들링하는게 항상 좋을 것이라 생각하지만 그렇지만은 않습니다.

기본적인 경우에는 지역 상태로 데이터를 관리
지역상태로 관리시 다수의 컴포넌트 간에 상태 의존성이 높아진다면 전역 상태로 데이터 관리
전역 상태 관리 시 서버에서 가져오는 데이터(db)와, 단순하게 UI 상태를 나타내는 데이터는 분리
서버 데이터 캐싱 시 전역 상태로 다루는 것은 추천하지 않음. 서버 상태를 관리 할때는 SWR이나 Reat-Query와 같은 서버 전용 라이브러리 사용 권장

Redux의 가장 큰 특징은 다음과 같습니다.

redux는 하나의 store를 가지고 있어 하나의 객체 트리를 가지고 있기 때문에 확장할 때 용이하다는 큰 장점을 가지고 있습니다.

또한 데이터 흐름이 단방향으로 일어나기 때문에 결과를 예측하기 쉽습니다.

다만 store는 외부요소기 때문에 리액트 내부에서 접근할 수 없어서 비동기 처리를 위해 react-saga같은 별도의 라이브러리를 추가해서 사용해야 합니다.

reducer은 순수함수이기 때문에 상태를 변경하는 것이 아니라 새로운 상태를 반환합니다.

mobx는 redux와 달리 store가 여러개지만 상태 변경할 경우, 다수의 store가 영향을 받을 수 있습니다.

또한 action 없이 데이터를 발행할 수 있지만 테스트나 유지보수 측면에서 문제를 일으킬 가능성이 있어 큰 규모의 프로젝트를 다루기에는 부적합니다.

context API는 리액트에 내장되어 있습니다.

Recoil은 Atom과 Selector로 이루어져 있다.
Atom을 구독하고 있으면 해당 컴포넌트만 선택적으로 리렌더링된다.
Selector은 비동기 처리와 데이터 캐싱 기능을 담당한다. Recoil은 비교적 최근에 나온 라이브러리라 아직 버전이 낮아 안정성측면이 좋지 않다는 단점이 있다.