개발자

React 상태관리질문

2024년 11월 28일조회 2,295

학원에서 프로젝트를 진행중인데 기능이많아 상태관리가 많아요. React useContext와 Redux중 어떤상태관리를 사용하는게 유리할까요?? 그리고 현업에서는 어떤방법을 택하는지 궁금합니다

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 5

인기 답변

김하림님의 프로필 사진

저는 Zustand를 추천드립니다. 1. 간단한 사용 방식 Zustand 공식 문서를 보시면 아시겠지만, 다른 상태관리 라이브러리에 비해 사용법이 매우 단순합니다. create()로 스토어를 만들면 React 컴포넌트에서 바로 가져다 쓸 수 있는 React hook이 생성됩니다. 스토어를 만드셨으면 React 컴포넌트에서 생성된 훅을 import해서 쓰시면 됩니다. 2. 작은 용량 Zustand는 React 상태 관리 라이브러리중에 압도적으로 용량이 작습니다. 요번에 출시한 v5에서는 0.588kb까지 사이즈가 작아졌습니다. 참고: 유명한 상태 관리 라이브러리들 Gzip + Minified 압축 용량 - Mobx 16kb - Redux 12.7kb - Recoil 23.5kb - Jotai 2.5kb - Zustand 0.588kb 3. 현업에서 사용 중 저희 팀도 작년부터 Zustand를 팀 내 표준 상태관리 라이브러리로 사용하고 있습니다. 반년정도 Zustand를 써보고 나서 팀 내 회고를 진행했었는데요. 도입에 대해 결과적으로 모두 긍정적인 반응이었습니다. 사용법이 직관적이고 쉬워서 러닝커브가 낮고 유지보수가 쉽다는 점이 큰 장점이었던 것 같아요.

박정환님의 프로필 사진

상황에 맞게 쓰시면 됩니다. redux는 규모가 크고 복잡한 서비스에서 큰 효과를 발휘하는 것으로 알고 있습니다. 학원에서 프로젝트를 진행하신다면 그리 큰 서비스는 아닐 것으로 예상되니 redux는 답이 아닐 수 있습니다. 또한 redux는 오래된 방식으로서 sample들에 보일러 플레이트 코드가 많아 자칫 잘못하면 설정하다 엄청 꼬일 수 있기 때문에 숙련하시고 하는 것을 권장드립니다. (특히 그 Slice 개념을 잘 가지고 놀아야 합니다. 주의해서 사용해야 하지요.) props-drilling이 염려되어 개선을 하시는 거라면 context-api로 해결할 수 있다면 해결을 보시고, 전역적 store 관리의 필요성이 판단된다면 recoil을 사용해보시는 것도 괜찮습니다. react를 만든 facebook에서 개발하였기 때문에 무엇보다 react와 호환성이 좋고 atom개념만 잘 이해하면 쓰기 편하다고 생각합니다. 소규모에서 중규모 프로젝까지 적절히 쓰면 좋습니다. 저는 회사에 recoil을 도입했습니다. 이외 zustand, jotai 등 상태 관리 라이브러리들이 몇개 더 있습니다. 잘 알아보고 판단하시면 되겠습니다. 그럼 즐거운 개발 되세요.

문정동개발자님의 프로필 사진

아무래도 현업에는 useContext와 redux모두 많이 쓰이고 그중에서도 redux가 훨씬 많이 쓰이는 것 같습니다. 다만 기존에 구축되어있는 시스템이 해당 라이브러리를 사용해서 구축되었기 때문에 많이 쓰이는거지 신규 프로젝트에서는 크게 고려되지 않는 것 같습니다. 우선 신규프로젝트에서는 tanstack-query(react-query가 이름이 바꼈습니다)가 최우선으로 고려가 많이 되구요 사실 작은 규모의 웹사이트같은 경우에는 tanstack query만으로도 충분히 구축 가능한 경우가 많아서 따로 전역상태 라이브러리를 사용하지 않는 경우도 있습니다. 다만 프로젝트 규모가 조금만 커지게되도 전역상태 관리 라이브러리가 필요하게 되는데 그래서 추가로 zustand가 많이 고려됩니다. 다운로드 수 기준으로 리덕스 - 1100만 탠스택쿼리 - 470만 주스탠드 - 460만 조타이 - 100만 리코일 - 50만 이정도 입니다. https://npmtrends.com/@tanstack/react-query-vs-jotai-vs-recoil-vs-redux-vs-zustand 요기 들어가서 보시면 됩니다.

김재민님의 프로필 사진

Context API는 그냥 React 내장된 모듈?이에용 간단하게 전역관리할꺼면 Context를 사용하는 맞는데 큰 프로젝트할꺼면 Redux를 사용하는게 맞아요!! 근데 현업에서는 Redux를 많이 사용하기 때문에 Redux를 사용하는게 좋을꺼같네용 물론 Redux는 사용하기 까다롭기는합니당 store, subscribe,reducer,Action,Slice 등 알아야하는 부분이 많습니다!! 저도 Redux를 공부중이기는합니다. Redux말고 Recoil를 사용하셔도 됩니당. 로직은 Context<Recoil<Redux 순이에요.

nexter님의 프로필 사진

새로 상태관리는 간단한 atom vs flux 크게 두개 부류로 나눠지는대요 atom : recoil, jotai flux : zustand, redux flux 는 코드량이 많고 상태 변화가 복잡한 경우 적합하고, atom 은 코드량이 작고 심플 합니다. 당연히 상황에 따라 적절히 선택해야하지만, 개인적으로 전역 다수의 상태관리를 선호하지 않아서 login 의 최소한의 범위 사용자 아이디+ 권한 정보 정도만 사용하고 있어요. 이경우 이것 저것 써봤는데 가급적 사용 안하려고 합니다. 그냥 tanstack query 로만으로도 왠만한 전역 상태관리가 되더라고요. 신규로 상태관리 라이브러리 도입시에는 다른건 몰라도 recoil 은 사용하지 않으시길 권장드립니다. 더 이상 업데이트가 되지 않고 있습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!