React | 전역상태 관리

React 전역 상태관리의 장점

애플리케이션의 복잡도가 증가할 때, 특히 여러 컴포넌트 간에 공통 데이터를 공유해야 하는 경웨 더 분명해짐

전역 상태 관리를 사용하면 데이터를 효율적으로 관리하고 유지보수하기 쉽게 만들 수 있다

 

1. 상태 공유가 쉬워짐
   • 사용하면 애플리케이션의 여러 컴포넌트가 공통된 데이터를 쉽게 공유할 수 있음
   • 컴포넌트 계층 구조에 상관없이 필요한 곳에서 상태에 접근하고 업데이트할 수 있으므로, 데이터를 자식 컴포넌트로 계속 전달하는 props drilling을 피할 수 있음
2. 상태 중앙 집중화
   • 사용하면 애플리케이션 전체 상태를 한 곳에서 관리할 수 있음. 이를 통해 상태의 변화를 추적하고 관리하는 것이 쉬워짐
   • 상태가 중앙에서 관리되므로 애플리케이션의 동작을 예측 가능하게 만들어 주며, 디버깅 및 유지보수가 용이함
3. 복잡한 데이터 흐름 관리 용이
   • 애플리케이션이 복잡해지면 컴포넌트 간에 데이터를 전달하고 상호작용하는 과정이 복잡해질 수 있음. 전역 상태 관리 도구를 사용하면 이 복잡성을 줄여주고, 데이터 흐름을 보다 직관적이고 명확하게 관리할 수 있음
4. 일관된 상태 관리
   • 애플리케이션의 모든 상태를 일관되게 유지하게 해줌. 특정 상태가 변경되면 해당 상태를 참조하는 모든 컴포넌트가 자동으로 업데이트 됨
   • 이를 통해 컴포넌트에서 상태가 불일치하는 문제를 방지할 수 있음
5. 애플리케이션 상태의 추적 가능성
   • 상태 변경을 기록하고 추적하는 기능을 제공. 특히 Redux와 같은 도구는 시간 여행 기능(time-travel debugging)을 지원하여 상태 변경의 히스토리를 추적할 수 있음
   • 이런 기능은 상태 변경과 관련된 문제를 쉽게 찾고 해결하는데 매우 유용
6. 비지니스 로직 분리
   • 전역 상태 관리 도구는 상태와 비지니스 로직을 컴포넌트로부터 분리할 수 있게 해줌. 이는 컴포넌트를 보다 단순하게 유지하고, 상태 관리와 관련된 복잡한 로직을 별도의 모듈로 분리할 수 있어 코드의 재사용성과 유지보수가 개선됨
7. 성능 최적화
   • 불필요한 재렌더링을 방지하고, 필요한 컴포넌트만 다시 렌더링 할 수 있게 함. 이를 통해 애플리케이션의 성능을 최적화 할 수 있음

 

---

Props Drilling

React 애플리케이션에서 여러 컴포넌트에 걸쳐 상태나 데이터를 전달할 때 발생하는 문제

이 과정에서 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 props를 통해 데이터를 전달하게 되는데, 중간에 있는 컴포넌트들이 그 데이터를 직접 사용하지 않더라도 단순히 전달하는 역할만 하게 될 수 있음

 

특징

• 부모 컴포넌트에서 자식 컴포넌트로 props 전달 : 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때, 중간의 여러 컴포넌트를 통해 전달해야하는 경우가 생김
• 중간 컴포넌트들은 데이터를 사용하지 않음 : Props를 받는 중간 컴포넌트는 그 데이터를 실제로 사용하지 않고, 단순히 자신보다 더 아래 있는 자식 컴포넌트로 전달하는 역할만 함
• 컴포넌트 간 의존성 증가 : 많은 컴포넌트가 props를 전달하고 받게 되면서, 컴포넌트 간의 의존성이 증가함. 이로인해 컴포넌트를 리팩토링하거나 수정할 때 유지보수가 어려워 질 수 있음

function GrandParent() {
  const [data, setData] = useState("Hello");

  return <Parent data={data} />;
}

function Parent({ data }) {
  return <Child data={data} />;
}

function Child({ data }) {
  return <div>{data}</div>;
}

GrandParant 컴포넌트의 상태인 data를 Child 컴포넌트에서 사용하고 있으나 Parent 컴포넌트는 data를 전혀 사용하지 않음에도 불구하고 단순히 자식에게 데이터를 전달하기 위해 Props로 data를 받아와야함

이와 같은 방식으로 props를 전달하는 것이 Props Drilling

 

Child4와 Child8이 같은 상태를 공유한다면 App컴포넌트에서 상태를 만들고 관리해야한다

이 때 Child1과 Child3은 상태를 내려주기 위해서만 존재하게 됨

 

 

문제점

• 코드 가독성 저하 : 중간 컴포넌트들이 데이터를 사용하지 않는데도 불구하고 Props로 전달해야 하므로 코드가 복잡해지고, 가독성이 떨어짐
• 유지보수 어려움 : 컴포넌트 간에 Props를 계속해서 전달해야 하므로, 중간 컴포넌트나 상태가 변경되면 모든 관련 컴포넌트를 수정해야 할 수 도 있어 유지보수가 어려워짐
• 불필요한 재렌더링 : 상위 컴포넌트가 재렌더링되면 중간 컴포넌트와 최종적으로 데이터를 사용하는 컴포넌트도 불필요하게 재렌더링될 수 있음

 

---

전역 상태 관리의 필요성

1. 상태 공유의 복잡성 해결
   • 컴포넌트 간에 props를 통해 데이터를 전달하다 보면 중간 컴포넌트들이 데이터를 사용하지 않으면서도 단순히 전달만 해야 하는 props drilling 문제가 발생함
   • 전역 상태 관리는 이 문제를 해결하여, 모든 컴포넌트가 직접 전역 상태에 접근하여 필요한 데이터를 사용할 수 있게 함
2. 상태 변경의 일관성 유지
   • 여러 컴포넌트가 같은 상태에 접근하고 이를 변경하는 경우, 전역 상태 관리 도구를 사용하면 일관된 상태 변경을 보장할 수 있음
   • 특정 상태가 변경되었을 때, 그 상태를 사용하는 모든 컴포넌트가 일관성 있게 업데이트됨
3. 복잡한 상호작용 관리
   • 복잡한 애플리케이션에서는 사용자 인터랙션이나 비동기 요청 등으로 인해 상태가 여러 군데에서 변경되어야 하는 경우가 많음
   • 전역 상태 관리 도구는 이런 상태 변경을 중앙에서 관리하고, 복잡한 상호작용을 명확하게 처리할 수 있도록 도움
4. 컴포넌트 간의 상태 공유
   • 애플리케이션이 커질수록 여러 컴포넌트에서 공통 상태를 사용해야 하는 경우가 늘어남
   • 예를 들어, 사용자 인증 상태나 테마 설정 등을 여러 컴포넌트에서 사용해야 할 때, 이를 전역 상태로 관리하면 불필요한 상태 전달을 줄이고, 상태 관리가 훨씬 간단해짐
5. 유지보수성 향상
   • 상태를 지역적으로 관리하면 컴포넌트가 복잡해지고, 상태가 여러 컴포넌트에 흩어져 있으면 유지보수가 어려워짐
   • 전역 상태 관리를 통해 상태를 중앙화하면 상태를 더 쉽게 관리하고 추적할 수 있어 유지보수성이 크게 향상됨
6. 리렌더링 최적화
   • 특정 컴포넌트에서만 상태 변경을 감지하고, 필요할 때만 리렌더링을 수행하여 애플리케이션의 성능을 높일 수 있음

 

전역 상태 관리 도구의 주요 장점

• Redux
  • 애플리케이션 전체에서 상태를 관리하고 추적할 수 있도록 해주는 강력한 상태관리 도구
  • 상태변경은 액션을 통해 발생하며, 리듀서 함수에 의해 상태가 업데이트 됨
• Recoil
  
  • React에 최적화된 상태 관리 도구로, 전역 상태뿐만 아니라 비동기 상태 관리에도 뛰어남
  • Recoil은 React 컴포넌트의 상태 의존성을 관리하는데 초점을 맞춤
• Zustand
  • 매우 가볍고 사용하기 쉬운 상태 관리 도구
  • 코드를 간단하게 유지하면서도 전역 상태를 관리할 수 있도록 해줌
• Context API
  • React에 내당된 상태관리도구
  • 복잡한 외부 라이브러리 없이도 전역 상태를 관리할 수 있음
  • 하지만 규모가 큰 애플리케이션에는 성능 이슈가 있을 수 있어 적절한 상황에만 사용하는 것이 좋음

 

전역 상태 관리가 유용한 상황

• 인증(로그인/로그아웃) 상태를 여러 컴포넌트에서 공유해야 할 때
• 쇼핑 카트와 같은 글로벌 데이터를 여러 페이지에서 사용할 때
• 애플리케이션의 테마나 언어 설정을 전체적으로 적용할 때
• 비동기 데이터를 중앙에서 관리할 때 (API 요청 결과)