오늘은 React 상태 관리에 대해 이야기해볼 거야. 프론트엔드 개발에서 상태 관리는 정말 중요하거든. React 프로젝트 하다 보면 "어떤 라이브러리를 써야 할까?" 고민 많이 하게 될 거야. 9년차 선배로서 실무 경험 바탕으로 선택지들과 고려 사항들을 알려줄게. 프로젝트 규모나 팀 상황에 맞춰 유연하게 대처하는 게 핵심이야.

api architecture diagram

1. 기본 중의 기본, useState

가장 먼저 떠올릴 건 React 자체 useState야. 컴포넌트 내부에서만 관리되는 상태로, 토글 버튼이나 입력 필드 값 등에 쓰이지. 사용법 간단하고, 대부분 작은 컴포넌트는 useState로 충분해. 다른 컴포넌트와 공유할 필요 없다면, useState부터 시작하는 게 맞아. 불필요하게 복잡한 도구를 가져올 필요 없거든.

2. 전역 값 주입에 유용한 Context API

useState로 해결 어려운 '프롭 드릴링(Prop Drilling)' 문제 생길 때 Context API가 유용해. 부모에서 자식에게 프롭을 계속 전달해야 하는 상황 말이지. 테마, 인증 정보, 다국어 설정처럼 앱 전체에서 쓰이지만 '자주 변하지 않는' 전역 값 전달에 효과적이야. 하지만 주의할 점은, Context API는 리렌더링 최적화 기능이 약해. 상태가 자주 바뀌는 복잡한 데이터엔 부적합해. 주로 한 번 설정되면 잘 바뀌지 않는 값들을 '의존성 주입' 용도로 추천해.

react frontend code

3. 복잡한 프로젝트를 위한 전용 라이브러리: Redux와 Zustand

이제 복잡한 프로젝트를 위한 전용 상태 관리 라이브러리를 보자. Redux, Zustand가 대표적이야.

  • Redux (with Redux Toolkit): Redux는 오래 사랑받은 라이브러리야. 강력한 미들웨어, 개발자 도구, 예측 가능한 상태 변화 등 장점이 많아. 대규모 엔터프라이즈 프로젝트나 여러 개발자 협업 환경에서 Redux의 엄격한 구조와 패턴이 큰 도움 돼. 초기 보일러플레이트 많았지만, Redux Toolkit (RTK)이 나오면서 많이 해소되었어. RTK는 Redux를 더 쉽고 효율적으로 쓸 수 있게 해주는데, createSlice 같은 기능으로 액션과 리듀서를 한 번에 정의해서 개발 생산성을 높여주거든. 비동기 처리도 RTK Query 등으로 깔끔하게 처리 가능해.
  • Zustand: 요즘 뜨는 라이브러리 중 하나가 Zustand야. Redux보다 훨씬 가볍고, 보일러플레이트 적고, API도 직관적이라 배우기 쉬워. 필요한 상태만 구독해서 리렌더링을 최적화하는 '선택적 리렌더링' 기능이 매력적이야. Provider로 감쌀 필요도 없고, TypeScript 지원도 훌륭해서 개인, 중간 규모 프로젝트, 빠른 개발 필요한 경우에 추천해. 나도 요즘 새로운 프로젝트 시작할 때 Zustand를 우선적으로 고려하더라.

4. 언제 어떤 도구를 써야 할까?

그럼 언제 어떤 걸 선택해야 할까? 간단히 정리해줄게.

  1. useState: 컴포넌트 내부 상태는 useState부터.
  2. Context API: 테마, 인증 등 앱 전반에 쓰지만 자주 안 바뀌는 값은 Context API가 좋아. 프롭 드릴링 해결 용도로.
  3. Zustand or Redux: 복잡하고 동적인 상태엔 전용 라이브러리.
    • Zustand: 가볍고 빠르게 시작하고 싶을 때, 보일러플레이트 적은 중간 규모 프로젝트에 적합.
    • Redux (with RTK): 대규모 엔터프라이즈 앱, 엄격한 구조, 여러 개발자 협업, 강력한 개발자 도구 필요할 때 유리. 결국 정답은 없어. 프로젝트 규모, 팀 숙련도, 요구 사항에 따라 가장 적합한 도구를 선택하는 게 중요해. 여러 라이브러리를 직접 써보면서 각자의 장단점을 몸으로 익히는 게 가장 좋은 방법이야. 너무 한 가지만 고집 말고 유연하게 접근해봐.