리액트를 배우면서 상태관리가 얼마나 큰 부분을 차지하는지 느끼고 있다.
prop에서 시작된 불편함?이 참 여러가지를 만들었구나 싶다.. (그래서 공부할게 많다ㅎ)
개인과제를 하면서 context에 대해서는 어느정도 이해가 된 것 같다. 그런데 나머지 세 라이브러리는 강의 내용 말고는 안 써보기도 했고, 어떤 상황에서 어떤걸 쓰는게 효율적인지 궁금해져서 아주 간단하게 정리해보기로 했다.
리액트 상태관리도구 정리하기
01. useContext
- 리액트 내장된 기능으로 가장 기본적인 관리도구
- 컴포넌트에서 필요한 데이터를 전역적으로 공유 할 수 있게 해준다. 그래서 각 컴포넌트 간의 prop drilling을 막을 수 있었고 사용하지 않는 컴포넌트가 넘겨주기만 하는 불필요한 상황을 해결할 수 있다.
- 주로 작은 애플리케이션에서 전역 상태 관리를 할 때 많이 사용된다.
🚨 useContext 단점 및 주의사항
단, 상태가 많아지면 디버깅이 어렵고 성능 저하가 발생하거나 코드가 복잡해질 수 있으니 주의하자!
📕공식문서 : https://ko.react.dev/reference/react/useContext
02. Redux
- 전역 상태 관리를 위한 매우 강력하고 널리 사용되는 라이브러리
- 상태의 예측 가능한 변경(액션과 리듀서)을 강조하고, 불변성 을 중요하게 다룬다. RTK의
immer를 사용하면 불변성을 다루기가 비교적 편해진다. - 중앙에서 상태가 관리되고, 매우 큰 애플리케이션에서 복잡한 상태 관리가 필요할 때 유용하다.
🚨 Redux 단점 및 주의사항
실습때도 느꼈지만 설정이 너무 왔다갔다 복잡하고 보일러플레이트 코드가 많다는 단점이다. 또 비동기처리는 미들웨어가 필요하다.
(미들웨어는 강의 때도 이해하려다가 계속 헷갈려서 말만 이해해버림.. 다시 공부하자...)
📕 공식문서 : https://redux.js.org/tutorials/essentials/part-1-overview-concepts
03. TanStack Query
- 서버 상태 관리에 초점을 둔 라이브러리
- 원래는 React Query 였는데 리액트 뿐만 아니라 다른 스택에서도 사용할 수 있게 되어서 이름이 바뀌었다.
- 주로 서버에서 데이터를 가져오고 캐싱, 동기화하는 데 탁월하며 가장 큰 강점으로 꼽힌다.
Redux와 달리 서버 데이터를 다루는 데 더 특화되어있다.
🚨 TanStack Query 단점 및 주의사항
버전이 계속 업데이트 되면서 코드 쓰는 방법도 조금씩 다르니 잘 확인하고 작성하기! 평소에 쿼리를 잘 다루지 않은 사람이라면~~ (-> 는 나)~~ 캐싱 관리, 뮤테이션 같은 개념이 까다로울 수 있다는 것도 단점이다.
📕 공식문서 : https://tanstack.com/router/latest/docs/framework/react/overview
04. Zustand
- 가볍고 직관적인 전역 상태 관리 라이브러리
Context API보다 성능이 좋고,Redux보다 설정이 간단하다. 강의 들을 때도 엥 이게 끝?! 이다 싶을 정도로 짧아져서 너무 놀라웠다.- 상태를 매우 간결하고 쉽게 관리할 수 있어서 비교적 작은 규모의 프로젝트나 간단한 상태 관리가 필요한 경우 적합하다고 한다.
🚨 Zustand단점 및 주의사항
커뮤니티와 확장성이 제한적이고 확장 기능이나 미들웨어가 부족할 수 있다.
규모가 커진다면 RTK 같은 체계적인 도구를 사용해야할 수 있다.
📕 공식문서 : https://zustand.docs.pmnd.rs/guides/updating-state
프로젝트의 규모, 복잡도나 요구 사항에 따라 선택할 수 있을 것 같다. 작은 애플리케이션에는 useContext나 Zustand를 쓰면 될 것 같고 이번 개인과제처럼 api 서버 데이터를 다루는 프로젝트에는 TanStack Query, 큰 애플리케이션에는 Redux가 유용할 수 있을 듯...!
팀 프로젝트 때 다른 건 몰라도 TanStack Query 만큼은 제대로 이해해야겠다.
