React에서 컴포넌트 간 데이터 공유하기 - Shared State

 

1. Shared State란?

React에서는 여러 개의 컴포넌트가 같은 데이터를 필요로 하는 경우가 많다. 이 때 공유된 상태(Shared State)가 필요하다.

 

예를 들어, 쇼핑몰 웹사이트에서

• 장바구니 개수를 헤더와 상품 목록에서 동시에 표시해야 한다면?
• 로그인 상태를 여러 페이지에서 유지하려면?
• 다크모드/라이트모드 설정을 모든 컴포넌트에 적용하려면?

이런 경우, 각각의 컴포넌트가 공통 상태(Shared State)를 가져야 한다.

---

 

2. Shared State를관리하는 방법

React에서 상태를 공유하는 방법은 크게 3가지가 있다.

 

1) Props를 이용한 상태 공유(기본적인 방법)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려보내는 방식

import React, { useState } from "react";

// 부모 컴포넌트
const Parent = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h2>부모 컴포넌트</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
            <Child count={count} />
        </div>
    );
};

// 자식 컴포넌트
const Child = ({ count }) => {
    return <h3>현재 카운트: {count}</h3>;
};

export default Parent;

 

단점 : 깊은 컴포넌트 구조에서는 Props Drilling(깊이 전달 문제) 발생

---

 

2) Context API를 활용한 상태 공유

여러 개의 컴포넌트에서 동일한 상태를 사용할 때 Context API를 사용하면 편리하다.

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

// 1️⃣ Context 생성
const CountContext = createContext();

// 2️⃣ Provider 컴포넌트 생성
const CountProvider = ({ children }) => {
    const [count, setCount] = useState(0);
    return (
        <CountContext.Provider value={{ count, setCount }}>
            {children}
        </CountContext.Provider>
    );
};

// 3️⃣ 상태를 사용하는 컴포넌트
const Counter = () => {
    const { count, setCount } = useContext(CountContext);
    return (
        <div>
            <h3>현재 카운트: {count}</h3>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
};

// 4️⃣ 앱에서 Provider 감싸기
const App = () => (
    <CountProvider>
        <Counter />
    </CountProvider>
);

export default App;

장점 : Props Drilling 문제 해결

단점 : 여러 개의 Context를 사용하면 렌더링 성능 저하

---

 

3) Zustand를 활용한 글로벌 상태 관리(더 쉽고 가벼운 관리법)

Zustand는 Redux보다 가볍고 간단한 상태 관리 라이브러리이다.

import create from "zustand";

// 1️⃣ 상태 스토어 생성
const useCounterStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
}));

// 2️⃣ 상태를 사용하는 컴포넌트
const Counter = () => {
    const { count, increase } = useCounterStore();
    return (
        <div>
            <h3>현재 카운트: {count}</h3>
            <button onClick={increase}>+</button>
        </div>
    );
};

export default Counter;

장점 : Context API보다 렌더링 최적화가 잘됨 사용법이 간단함

단점 : 추가적인 라이브러리 설치 필요

 

---

3. 3가지 방법 비교하기

방법	장점	단점	사용 사례
Props	간단하고 기본적인 방법	Props Drilling 문제 발생	부모-자식간 데이터 전달
Context API	Props Drilling 해결, 여러 컴포넌트에서 공유 가능	성능 최적화 필요, 여러 개의 Context 사용 시 복잡함	테마 설정 다크모드, 로그인 상태 관리
Zustand	가볍고 직관적, 렌더링 최적화	외부 라이브러리 필요	글로벌 상태 관리, 대규모 프로젝트

 

• 간단한 상태 공유 : Props
• 여러 컴포넌트에서 공유 : Context API
• 성능이 중요한 글로벌 상태 : Zustand 또는 Redux