React에서 하위 컴포넌트 간 상태 공유하는 방법

하위 컴포넌트에서 State 공유하기

하위 컴포넌트에서 부모 컴포넌트의 상태를 공유하거나, 상위 컴포넌트와 상태를 주고받는 경우에는 상태를 위로 끌어올리거나(Lifting State Up) Context API와 같은 방법을 사용해 상태를 관리할 수 있다.

---

1. 상태를 부모 컴포넌트로 올려서 공유하기(Lifting State Up)

React에서 Lifting State Up(상태 끌어올리기)은 부모 컴포넌트에서 상태를 관리하고, 그 상태를 하위 컴포넌트에 props로 전달하는 방법이다.

예시 : 상위 컴포넌트에서 하위 컴포넌트로 상태 전달하기

// 부모 컴포넌트 (Parent)
import React, { useState } from 'react';

function Parent() {
  // 부모 컴포넌트에서 상태 정의
  const [sharedValue, setSharedValue] = useState("");

  // 상태 업데이트 함수 (하위 컴포넌트에서 사용할)
  const handleChange = (newValue) => {
    setSharedValue(newValue);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildA sharedValue={sharedValue} handleChange={handleChange} />
      <ChildB sharedValue={sharedValue} />
    </div>
  );
}

export default Parent;

// 자식 컴포넌트 A (ChildA)
function ChildA({ sharedValue, handleChange }) {
  return (
    <div>
      <h2>Child A</h2>
      <input
        type="text"
        value={sharedValue}        // 부모 상태 값을 입력 필드에 표시
        onChange={(e) => handleChange(e.target.value)}  // 부모 상태 업데이트
      />
    </div>
  );
}

// 자식 컴포넌트 B (ChildB)
function ChildB({ sharedValue }) {
  return (
    <div>
      <h2>Child B</h2>
      <p>Shared Value: {sharedValue}</p>  {/* 부모 상태 값을 표시 */}
    </div>
  );
}

 

• Parent : 부모 컴포넌트에서는 sharedValue라는 상태를 관리하고, 그 값을 ChildA와 ChildB로 props를 통해 전달한다.
• ChildA : sharedValue를 입력 필드에 표시하고, 사용자가 입력할 때 handleChange를 호출하여 부모의 상태를 업데이트 한다.
• ChildB : 부모 컴포넌트로 부터 받은 sharedValue를 그냥 표시한다.

 

---

2. Context API를 사용하여 상태 공유하기

Lifting State Up 방식은 상태를 여러 컴포넌트에 전달해야 할 때 불편할수 있다. 특히 중간에 위치한 컴포넌트들이 상태와 관련 없는 경우, Context API를 사용하면 상태를 전역적으로 관리하고, 깊은 컴포넌트 트리에서도 쉽게 상태를 공유할 수 있다.

 

예시 : Context API를 사용하여 상태 공유하기

import React, { useState, createContext, useContext } from 'react';

// Context 생성
const SharedStateContext = createContext();

function Parent() {
  const [sharedValue, setSharedValue] = useState("");

  return (
    <SharedStateContext.Provider value={{ sharedValue, setSharedValue }}>
      <h1>Parent Component</h1>
      <ChildA />
      <ChildB />
    </SharedStateContext.Provider>
  );
}

export default Parent;

// 자식 컴포넌트 A (ChildA)
function ChildA() {
  const { sharedValue, setSharedValue } = useContext(SharedStateContext);

  return (
    <div>
      <h2>Child A</h2>
      <input
        type="text"
        value={sharedValue} // Context에서 가져온 sharedValue
        onChange={(e) => setSharedValue(e.target.value)}  // Context에서 제공된 setSharedValue 사용
      />
    </div>
  );
}

// 자식 컴포넌트 B (ChildB)
function ChildB() {
  const { sharedValue } = useContext(SharedStateContext);

  return (
    <div>
      <h2>Child B</h2>
      <p>Shared Value: {sharedValue}</p> {/* Context에서 가져온 sharedValue */}
    </div>
  );
}

 

• SharedStateContext : createContext를 사용해 Context를 생성한다. 이 Context는 sharedValue와 setSharedValue를 저장하고, 이를 다른 컴포넌트에서 접근할 수 있게 해준다.
• Provider : Parent 컴포넌트에서 SharedStateContext.Provider로 감싸면, 그 안에 있는 모든 자식 컴포넌트들이 이 Context를 접근할 수 있게 된다.
• useContext : ChildA와 ChildB컴포넌트에서 useContext(SharedStateContext)를 사용하여 부모에게 제공한 값을 읽고, 업데이트한다.

이 방식은 상태를 트리 구조의 깊은 컴포넌트까지 쉽게 전달할 수 있기 때문에, 상태 관리가 더 간편해진다.

 

---

 

3. 상태 업데이트와 하위 컴포넌트 간의 상태 공유

하위 컴포넌트가 상위 컴포넌트로 부터 전달받은 상태를 업데이트 하려면, 상태 업데이트 함수를 함께 전달하거나 Context API를 활용해야 한다.

상태를 직접적으로 변경하는 것은 권장되지 않으며, 부모 컴포넌트에서 전달된 상태 업데이트 함수를 사용해 상태를 변경한다.

 

상태 공유 방법 비교

방식	장점	단점
상태 끌어올리기	간단하고 직관적, 부모에서 상태 관리 가능	중간 컴포넌트가 상태와 관련이 없을 때, props를 전달해야 해서 복잡해짐
Context API	깊은 컴포넌트 트리에 서도 쉽게 상태 공유 가능	전역 상태를 사용하기 때문에, 상태가 너무 많으면 관리가 어려움