공부/리액트 (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를 가장 많이 사용한다는 결과를 유추할 수 있다.