공부/리액트 (React)
[React] 상태 관리 도구(State Management Tools)의 필요성
먼지투성이밤
2022. 10. 12. 14:32

1. 상태 관리 도구(State Management Tools)란?
상태 관리 도구가 왜 필요할까?
👉 먼저 상태란?
- React에서 State는 component 안에서 관리되는 것이다.
- 아래는 Class component 상태 관리 예시이다.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()}; // 여기서 관리
}
render() {
return (
<div>
<h1>Hello World!</h1>
<h2>It's {this.state.data.toLocaleTimeString()}.</h2>
</div>
);
}
}
👉 Component 간의 정보 공유
- 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.
- 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
- 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.
- 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈
- How to solve a Problem with React?

👉 상태 관리 툴은 어떤 문제를 해결해 주나?
1. 전역 상태 저장소 제공
2. Props drilling 이슈 해결
- 예를 들어, <A>라는 컴포넌트에 상태가 있고, <I>라는 컴포넌트가 해당 상태를 사용한다고 하면,
- 그 중간에 존재하는 <C>, <G> 등은 굳이 name이라는 상태가 필요하지 않음에도,
컴포넌트에 props를 만들어 자식 컴포넌트에 넘겨주어야 했다. - 이를 props drilling(프로퍼티 내려꽂기) 문제라고 부른다.
- 전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결 된다.
👉 상태 관리 툴 종류
- React Context
- Redux
- MobX
👉 npm 사이트에서 모듈 다운로드 수 비교 분석하기

✅ 위 데이터를 보면 React를 사용할 때는 상태 관리 툴로 Redux를 가장 많이 사용한다는 결과를 유추할 수 있다.