리액트에서 상태관리도구는 왜 필요할까?
Component 간의 정보 공유
- 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다.
- 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
- 자식 컴포넌트들이 많아진다면 상태 관리가 매우 복잡해 진다.
- 상태 관리하는 상위 컴포넌트에서 계속 내려 받아야 한다. (Props Drilling 이슈)
Props Drilling?
Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.
하위 컴포넌트가 많아질수록 props를 추적하기가 어려워지고, 유지보수가 힘들어진다.
이러한 이슈를 해결하기 위해서 상태관리 라이브러리를 사용한다.
Redux
자바스크립트 상태관리 라이브러리이다.
React Context와 같이 가장 많이 사용되는 상태관리 라이브러리이다.
Action (액션)
- 액션은 앱에서 스토어에 운반할 데이터를 말한다.
- 자바스크립트 객체 형식으로 되어 있다.
Reducer (리듀서)
- 액션을 리듀서에 전달하고
- 리듀서가 액션를 보고 store에 상태를 업데이트하는 것이다.
- 액션을 리듀서에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.
Store (스토어)
- 컴포넌트와 별개로 스토어라는 공간이 있어서 그 스토어 안에서 앱에서 필요한 상태를 담는다.
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
Action → dispath(액션) → Reducer 호출 → 새로운 Store 생성
Frontend Developer