리액트 상태관리

리액트에서는 전역으로 상태관리를 하는 여러 라이브러리들이 존재합니다.
그 중에 가장 유명하고 많이 쓰는 라이브러리가 redux다.

하지만. redux말고도 여러가지 라이브러리가 있는데 리액트 전용상태관리 라이브러리인 recoil
또 Context api, mobx, swr등이 있는데 오늘은 이 부분에 대해 알아보도록 하자.

1. 전역상태란?
   -전역상태랑 말그대로 해당 컴포넌트 외에도 전역으로 상태관리를 하는 것을 말한다.

먼저는 우리가 다뤄야할 상태가 무엇인지를 정의하고 이를 구분할 수 있어야 한다.
-어떤 상태가 들어가야하는지 생각하고 파악해볼 필요가 있다.
-상태를 나눌 필요가 없다면 굳이 상태관리 라이브러리를 사용해야 하는지...

전역 상태관리 라이브러리를 비교해보자.

1. Context Api
   -context api는 구성요소 트리에서 쉽게 전달할 수 있는 전역 데이터를 생성한다. 이것은 데이터를 전달하기 위해 props가 있는 구성요소 트리를 통과해야 하는 "props drilling" 의 대안으로 사용되고 있다.

장점
1. 사용이 간편하다.

단점
1. 속도가 느리다. 컨텍스트의 값이 변경되면 실제로 사용하는지 여부에 관계없이 컨텍스트를 사용하는 모든 구성요소가 다시 렌더링 된다.

2. Redux
   -Redux는 React앱의 상태를 중앙 집중식으로 저장하고 관리하는데 사용되는 상태관리 라이브러리 입니다.
   Redux는 앱의 모든 상태를 하나의 전역화된 상태 객체로 추상화 합니다.

Redux의 3가지 원칙

• 전체 상태 값이 하나의 자바스크립트 객체로 표현된다.
• 상태 값은 읽기 전용의 불변 객체로 관리한다.
• 오직 순수함수에 의해서만 상태값을 변경할 수 있다.

장점
1. 상태개체의 일부가 업데이트 되면 해당 상태를 사용하는 구성 요소만 재렌더링 된다. Redux는 자주 업데이트 되는 앱이 있을때 사용하면 더욱 효율적이다.
2. 상태관리 라이브러리에서 Redux는 가장 큰 커뮤니티를 지원한다.

단점
1. 많은 사용구와 복잡한 구조를 가진다. (설치해야 할 타사 라이브러리 존재하고 그만큼 번들 크기가 증가함)
2. 불변 저장소의 단점으로 저장소가 거대한 JSON파일로 변할 수 있다는 점 (작성할 코드가 많아짐)

Mobx
-Mobx는 상태관리를 간단하기 위해 만들어진 기능적 반응 프로그래밍을 적용하는 상태관리 라이브러리

장점
1. Mobx 는 @observable 을 사용하여 구독을 통해 변경 사항을 자동으로 추적한다. 이것은 Redux 개발자가 리듀서에서 데이터를 복제하고 변경 불가능하게 업데이트하는 오버헤드를 제거한다.
*Redux 에 비해서 상용구가 적다. 그만큼 배우기 쉬움

2. MobX는 여러 저장소를 지원하지만 Redux 는 단일 저장소를 허용한다 이를 통해서 UI 상태와 도메인 상태에 대한 별도의 저장소를 가질수 있다.
   UI 상태가 별도로 유지되기 때문에 도메인 상태를 서버 데이터와 일치하게 유지하고 서버에 연결하는 것을 간단하게 만들수 있다.

단점
1. 업데이트 중에 Mobx 상태를 덮어쓴다. 구현하기에는 쉽지만 저장소가 훨씬 덜 예측 가능하기 때문에 테스트 및 유지관리가 어려울 수 있다.

SWR
-SWR은 Next.js에서 개발한 zeit그룹에서 사용하는 라이브러리다.
SWR은 맨 처음 cache로 받아온 데이터 즉 오래된 정보를 먼저 리턴해주고 그 다음 fetch를 한 후 마지막으로 업데이트 된 데이터를 다시 리턴해준다. 이러한 로직을 통해서 UX의 향상을 만들어 낼 수 있다.

장점

1. 데이터가 캐싱된다.

2. SWR은 자동으로 재검을을 해준다.

3. Revalidate on Focus page에 re-focus 하던가 tab 을 변경 했을때 , SWR 은 자동으로 데이터 재검증 한다.
   이로써 최신 상태로 데이터를 즉시 동기화 하는데 유용
   오래된 모바일 탭 또는 절전 모드가 된 노트북과 같은 환경에서 데이터를 새로 고치는데 유용

4.Revalidate on Interval
SWR 은 설정한 INterval 이후 데이터를 자동으로 다시 가져 오는 옵션을 제공

5.Revalidate on Reconncet
데이터가 항상 최신 상태인지 확인하기 위해 SWR 은 네트워크가 복구 될때 자동으로 재검증
사용자가 다시 온라인 상태가 될때 유효성을 다시 확인할 수 있도록 한다.