상태관리 라이브러리란?

❓상태 관리 도구가 왜 필요할까?

상태란(State)?

• React에서 State는 component 안에서 관리되는 것이다.
• state는 오로지 자식 컴포넌트에게만 전달해줄 수 있다.

 

상태관리 필요성

1. 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.

2. 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.

3. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해지며 자식이 많아질 수록 데이터이동이 많아져 코드가 복잡해진다.

• 만약 위그림 처럼 부모 컴포넌트로부터 상태를 전달받아야하는 ComponentD가 있다면 그 사이의 컴포넌트에 해당 상태를 전달해서 도착지인 ComponentD에 상태를 전달해주어야 한다.

심지어 그 사이의 ComponentB는 해당 상태가 필요없음에도 본인의 자식인 ComponentD에 상태를 넘겨주기 위해 상태를 전달받고 전달해주는 과정을 추가해야하는 것이다 => Props drilling 이슈

위와 같은 예시 상태가아닌 ComponentA 와 ComponentD 사이에 더많은 컴포넌트가 있다면 그 사이 컴포넌트는 계속해서 본인에게 필요없는 상태를 다음 자식 컴포넌트에 전달해주는 역할을 해야 할 것이다.

 

🟪상태 관리 라이브러리

👉🏻 문제해결

1. 전역 상태 저장소 제공

2. Props drilling 이슈 해결 

• 상태 관리 라이브러리를 이용하면 위의 예시에서 처럼 부모로부터 자식으로 상태를 내려받는것이 아닌 모든 컴포넌트에 상태를 전달해주지 않고도 어떤 컴포넌트에서든 바로 전역 상태인 state에 접근이 가능하게 된다.

이해를 돕기위한 예시 사진

 

 

👉🏻 상태 관리 툴 종류

• React Context
• Redux
• MobX