aB

상태관리 자료조사

• react-query
• https://maxkim-j.github.io/posts/react-query-preview
• https://blog.doitreviews.com/development/2021-08-27-react-query-tutorial-01/
• 단점
• 나온지 오래되지 않아 커뮤니티가 적다.
• 전역 상태관리보다 비동기 처리하는데에 목적이 더 뚜렷함, 그래서 보통 가벼운 recoil 이나 contextAPI과 같이 사용한다고 함
• 장점
• React Query는 React app에서 server state를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 쉽게 만들어줍니다 → 공식사이트에서 생각하는 장점
• redux 대비 코드량이 줄어든다. (예시..)
• devTools가 따로 내장되어 있어 사용하기 쉽다.
• 서버에서 데이터를 가져올 때 reducer와 같이 별도로 분리된 파일을 돌아다니며 코드작성을 하지 않아도 된다.
• 화면에 데이터를 최신화 하기 위한 코드가 간단하다.
• 클라이언트에서 서버 데이터의 캐시를 관리합니다. (반복되는 요청을 줄일 수 있음)
• loading, error state를 관리합니다.
• pagination, infinite scroll도 쉽게 처리할 수 있도록 지원합니다.
• prefetching을 쉽게 처리할 수 있도록 지원합니다.
• error가 발생할 경우 자동으로 재시도합니다.
• request가 성공하거나 실패했을 때 각각 callback을 정의할 수 있습니다.
• 위 기능들이 내장되어 있기 때문에 코드량이 줄고 사용하기 쉽다.
• 특징
• ClientState, ServerState의 개념에 대해 알고있어야 한다.
• ClientState : 서버에서 받아온 정보가 아닌 클라이언트 쪽에서 관리하는 상태 (전역상태라고 생각함)
• ServerState : 서버에서 받아오는 모든 정보
• react-query는 serverState만 관리한다.
 

• recoil
• https://velog.io/@wooder2050/리코일Recoil는-왜-만든-건데
• 단점
• 아직 리액트의 공식 상태관리 라이브러리는 아니다. (하지만 리액트를 만든 개발자들이 만듬)
• 장점
• 별도 store 없이 atom 이라는 것으로 전역 상태를 관리할 수 있다.
• atom은 별도의 구독이나 옵저버 개념을 생각할 필요 없이 useState 처럼 사용하면 된다.
• 아래와 같이 사용하면 상태가 변경되었을 때 자동으로 전역에서 상태가 공유된다.

const [user, setUser] = useRecoilState(userState);

• selector를 이용하면 리듀서 없이 복잡한 데이터의 형태를 만들 수 있다.
• hook에 익숙하다면 적응하기 쉽다.
• 러닝커브가 낮다.
• 공식문서의 한글화 https://recoiljs.org/ko/

• redux
• 단점
• boilerplate 코드가 상당히 많음
• 요즘 추세를 보았을 때 점점 사용 빈도가 줄어드는 것 같다.
• 비동기 처리를 위해 redux-thunk나 redux-saga를 사용해야 한다.
• 장점
• 커뮤니티가 가장 커서 정보가 많다.
• devTool을 활용할 수 있다. 그래서 디버깅하기 쉽다.