[React 공식문서] Managing State — Sharing State Between Components(컴포넌트 간의 state 공유)

아래 글은 React 공식문서를 기반으로 작성된 글입니다.

컴포넌트 간의 state 공유 - React

두 컴포넌트의 state가 항상 함께 변경되는 것을 구현하려면 두 컴포넌트에서 state를 따로 관리하면 안되고, 부모 컴포넌트에서 state를 만든뒤, props를 통해 state를 각각 전달한다.

이 방법을 우리는 Lifting State Up, state 끌어올리기라고 한다.

function Panel({ title, children }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>
          Show
        </button>
      )}
    </section>
  );
}

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About">
        Panel 1 
      </Panel>
      <Panel title="Etymology">
        Panel 2
      </Panel>
    </>
  );
}

이런식으로 Panel 컴포넌트에서 isActive state를 따로따로 관리하고 있다면, 두개의 Panel이 독립적으로 움직일 것이다.

이때, 우리는 state를 아래와 같은 단계로 부모로 끌어올려 공유할 수 있다.

1. 자식 컴포넌트에서 state를 제거합니다.
2. 공통 부모 컴포넌트에 하드 코딩된 데이터를 전달합니다.
3. 공통 부모 컴포넌트에 state를 추가하고 이벤트 핸들러와 함께 전달합니다.

Step1: 자식 컴포넌트에서 state 제거

function Panel({ title, children, isActive }) {

위와 같이 Panel에서의 isActive state는 삭제한 뒤, props로 isActive를 받는다.

Step2: 부모 컴포넌트에 state 추가하기

export default function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0);

출처: https://react-ko.dev/learn/sharing-state-between-components

Step3: 자식 컴포넌트에 handler 함수 전달하기

export default function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel
        title="About"
        isActive={activeIndex === 0}
        onShow={() => setActiveIndex(0)}
      >
				Panel 1					
      </Panel>
      <Panel
        title="Etymology"
        isActive={activeIndex === 1}
        onShow={() => setActiveIndex(1)}
      >
       Panel 2
      </Panel>
    </>
  );
}

Panel에서 클릭이벤트가 발생했을 때, 부모 컴포넌트인 Accordion의 state를 변경할 수 있는 setState 함수를 전달해 준다.

Controlled Component vs. Uncontrolled Component

Controlled Component: 자체적으로 state를 가지는 컴포넌트

• 실시간으로 값이 필요할때에는 제어 컴포넌트를 사용
• Input을 Controlled Component로 만든다면, 매 입력마다 리렌더링이 일어난다.
• Ex) 유효성 검사를 Input에 적용할때 사용해야함!

Uncontrolled Component: 자체적으로 state를 가지지 않고, props에 의해 동작하는 컴포넌트

• 불필요한 렌더링을 줄이고자 할 때, 특히 form 양식을 사용할때 많이 사용한다.
• 주로 useRef 를 사용해서 값들을 관리하며, state로 관리하지 않기에 불필요한 리렌더링이 일어나지 않는다.
• Ex) 일반적인 Form 컴포넌트에서 사용!

SSOT(A Single Source of Truth for Each State)

단일 진실 공급원이라는 뜻인데, 이는 모든 state가 한곳에 있다는 뜻이 아니라, 각 state마다 해당 정보를 소유하는 특정 컴포넌트가 있다는 뜻.

컴포넌트마다 공유하는 state들을 각자 다 생성하는 것이 아닌, 부모(단일 책임)에서 state를 생성해, 자식에게 전달하는 것을 말한다.