[React] 전역 상태 관리(props Drilling, 전역상태관리)

1. Props Drilling이란?

`React 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정에서 중간에 있는 child1, child3까지도 의미없이 props를 전달해줘야 하는 번거로운 상황이 발생한다. 

컴포넌트의 계층이 많을수록 코드가 복잡해지고 유지보수가 어려워짐.

function App() {
  const user = "주인님";
  return <Parent user={user} />;
}

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

function Child({ user }) {
  return <GrandChild user={user} />;
}

function GrandChild({ user }) {
  return <p>안녕하세요, {user}</p>;
}

// 이런식으로 최하단 컴포넌트에 props를 전달하기 위해 중간에 있는 애들까지 props를 전달해 줘야하는 상황이 생김

 

2. 전역 상태관리의 필요성

`

` 전역 상태관리는 여러 컴포넌트에서 동일한 데이터가 필요할때와

`  props drilling을 피하기위해 사용 되어진다.

 

3. 전역 상태관리 도구들

도구                                     특징

React Context	간단한 전역 상태 관리에 적합 (작은 앱에 딱)
Redux	매우 구조화된 상태 관리 (복잡한 앱에 적합)
Zustand	가볍고 사용 쉬움 (React hook 스타일 좋아하는 사람에게 추천)
Recoil / Jotai	atom 단위로 상태 관리, 매우 유연함