[React] 상태 관리 도구(State Management Tools)

리액트와 같이 사용하는 상태 관리 도구는 Redux 이다.

Redux를 배우기 전에 상태 관리 도구란 무엇이고 왜 필요한지에 대해 알아보자

 

 

 

 

상태 관리 도구(State Management Tools) 를 사용하는 이유

 

React 에서 State는 component 안에서 관리되는 것이다.

import React, { useState } from 'react';
 
 function Example() {
    const [count, setCount] = useState(0);
    
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
    );
}

함수형 컴포넌트 상태 관리의 예시 코드

 

Component 간의 정보 공유

• 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다
• 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
• 자식이 많아지면 상태 관리가 매우 복잡해진다.
• 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈
• 이러한 문제를 해결하는 방법이 상태 관리 도구!

상태 관리 도구가 해결해주는 문제점들

 

1. 전역 상태 저장소 제공

2. Props drilling 이슈 해결

• <A> 라는 컴포넌트에 상태가 있고, <I> 라는 컴포넌트가 해당 상태를 사용한다고 하면,
• 그 중간에 존재하는 <C>,<G> 등은 굳이 name이라는 상태가 필요하지 않음에도 컴포넌트에 props를 만들어 자식컴포넌트에 넘겨주어야 했다.
• 이를 props drilling 문제라고 부른다.
• 전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결 된다.

* Props drilling

props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정