React의 상태 관리
React에서 상태 관리란
앱의 데이터 흐름을 제어하고 구성 요소 간의 일관성을 유지하는 데에 중요한 역할
이 글에서는 좋은 상태관리란 무엇인가, 지역 상태관리와 전역 상태관리 및 props drilling, 렌더링 관리, 주요 상태관리 도구인 Redux와 Context API에 대해 알아보겠습니다.
좋은 상태 관리란?
지역 상태관리와 전역 상태 관리에 대해
props drilling에 대해
렌더링 관리에 대해
주요 상태 관리 도구인 Redux와 Context API에 대해
1️⃣ 좋은 상태관리란 무엇일까?
애플리케이션의 예측 가능성, 효율성, 그리고 유지보수성을 높이는 것이 좋은 상태관리의 목표이다.
예측 가능성: 상태 변화가 일관된 규칙에 따라 발생하여 애플리케이션의 동작을 예측할 수 있어야 합니다.
모듈성: 상태 관리 로직이 컴포넌트의 렌더링 로직과 분리되어 있어야 하며, 컴포넌트 간에 재사용이 가능해야 합니다.
디버깅 용이성: 상태 변화의 추적과 로깅이 용이하여야 하며, 개발 중에 상태를 쉽게 검토할 수 있어야 합니다.
상태 관리의 접근 방식에 따라 애플리케이션의 성능과 개발의 복잡성이 달라질 수 있으므로, 상황에 맞는 적절한 도구와 전략을 선택하는 것이 중요합니다.
2️⃣ 지역 상태 관리와 전역 상태 관리
지역 상태 관리
React hooks와props를 사용하여 컴포넌트 내부에서 상태를 관리하는 방법
→ 간단하지만 prop drilling 문제가 발생할 수 있다는 단점이 있다.
전역 상태 관리
Redux,Context API등의 라이브러리를 사용하여 전역적으로 상태를 관리하는 방법
→ prop drilling 문제를 해결할 수 있지만 side effect 관리가 복잡해질 수 있다.
🤔 그렇다면, props drilling은 무엇일까?
상위 컴포넌트의 상태를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들을 거쳐야 하는 문제
→ 코드 가독성과 유지보수성을 저하시킬 수 있습니다.
해결 방법
전역 상태 관리 라이브러리를 사용
Redux,Context API,Recoil등의 라이브러리를 활용하면 상태를 중앙에서 관리할 수 있어 prop drilling 문제를 해결할 수 있다.
3️⃣ React의 렌더링 관리
React에서 렌더링은 컴포넌트의
props와state에 따라 결정된다.
렌더링을 효과적으로 관리하는 방법 3가지
React.memo: 컴포넌트의 props가 변경되지 않으면 리렌더링을 방지
useMemo, useCallback: 메모이제이션을 통해 불필요한 계산을 방지
useTransition: 긴급하지 않은 상태 변경을 지연시켜 성능을 향상
또한, 상태 변경은 렌더링을 유발한다.
예를 들어 props 변경은 컴포넌트 렌더링을 유발하며, React에서는 상태 변경 시 렌더링을 큐에 넣는다.
따라서 상태 변경 기반으로 렌더링을 최적화하고 컴포넌트 구성 시 Reconciliation을 고려하는 것이 중요하다.
4️⃣ 많이 사용되는 상태관리 라이브러리
Redux
가장 많이 사용되는 전역 상태관리 라이브러리로, 애플리케이션의 상태를 하나의 저장소(store)에서 관리
단일 진실 원천 (Single Source of Truth): 앱의 모든 상태를 하나의 저장소에서 관리
상태는 읽기 전용: 액션을 통해서만 상태를 변경 가능
순수 함수의 사용: Reducers는 순수 함수로서, 같은 입력에 대해 항상 같은 출력을 반환하며 부작용이 없다.
Redux는 크고 복잡한 애플리케이션에서 매우 효과적이지만, 상대적으로 보일러플레이트 코드가 많고 초기 학습 곡선이 높은 편이다.
Context API
컴포넌트 트리 전체에 걸쳐 데이터를 효율적으로 전달할 수 있는 방법을 제공
props drilling 없음: 중간 단계의 컴포넌트를 거치지 않고, 필요한 데이터를 직접 하위 컴포넌트에 전달
간편한 사용: Redux에 비해 구현이 간단하며, 추가 라이브러리 없이 React만으로 상태 관리가 가능
Context API는 간단하고 작은 규모의 상태 관리에 적합하지만, 상태가 복잡하거나 많은 업데이트가 필요한 큰 애플리케이션에서는 성능 문제가 일어날 수 있다.
