Don't use Redux just because someone said you should
Getting Started with Redux | Redux
6번 컴포넌트에서 상태를 관리하고 있는데, 만약 7번 컴포넌트에서도 그 상태를 쓰고 싶다면?
⇒ 한 단계 상위 컴포넌트인 4번 컴포넌트에서 상태를 관리하고, 6번과 7번 컴포넌트에는 props로 내려줍니다.
위의 현상을 해결하고 4번 컴포넌트에서 상태를 관리하려는데, 만약 5번 컴포넌트에서도 그 상태를 써야 한다면?
⇒ 4번과 5번의 바로 상위 컴포넌트인 2번 컴포넌트에서 해당 상태를 관리합니다. 4번과 5번 컴포넌트에는 props로 그 상태를 내려줍니다.
또 위의 현상을 해결했는데 이제는 2번 컴포넌트에서 관리하는 상태를 3번 컴포넌트에서도 쓰고 싶다면?
⇒ 2번과 3번 컴포넌트의 공통 상위 컴포넌트인 1번 컴포넌트에서 해당 상태를 관리하고, 2번과 3번 컴포넌트에는 해당 상태를 props로 내려줍니다.
그럼 아래와 같은 상황이 될 거예요.
첫번째 이미지로 돌아가서 다시 생각해봅시다. 2번과 4번 컴포넌트는 상태를 사용하나요?
[참고] 빨간색으로 체크한 컴포넌트는 상태를 쓰는 컴포넌트입니다.
⇒ 1번 컴포넌트의 상태를 props로 내려주면서,
2번 컴포넌트는 4번과 5번 컴포넌트에게 해당 상태를 props로 전달만 하지 본인이 사용하지는 않습니다.
그리고 4번 컴포넌트는 6번과 7번 컴포넌트에 해당 상태를 전달만 할 뿐이고, 본인이 사용하지는 않습니다.
이런 현상을 prop drilling 이라고 합니다!
그리고 리덕스는 store
에서 상태를 관리함으로써 prop drilling 문제를 해결합니다.
그래서 리덕스를 상태 관리 라이브러리라고 합니다.
그럼 리덕스만 상태를 관리할 수 있을까요?
⇒ Context API, MobX, Recoil 등 상태를 관리할 수 있는 방법은 다양합니다.
Best React State Management Libraries In 2021 -
Context API 와 React Hooks로 전역에서 상태 관리하기
Global state using only React Hooks with the Context API (No Redux)