[React] Context: 글로벌 상태 관리의 은밀한 해결사 🌍

🌍 React의 Context에 대해 톺아보자!

React 앱을 개발하다 보면 데이터를 “부모 → 자식 → 손자” 식으로 줄줄이 내려줘야 할 때가 있어요. 이때 우리는 “props drilling”이라는 재미없는 놀이에 빠지게 됩니다. 컴포넌트 간 데이터 전달이 너무 귀찮고 복잡하게 느껴질 때, 바로 React Context가 구세주처럼 등장합니다!

 

오늘은 React Context의 모든 것을 탈탈 털어봅니다. Context가 뭔지, 왜 써야 하는지, 어떻게 쓰는지, 그리고 실전에서 유용한 팁까지! 😎

---

🌟 Context란?

Context는 React 앱에서 컴포넌트 트리 전체에 데이터를 전달할 수 있는 기능입니다. 일반적으로 props를 사용해 데이터를 전달하지만, 중간에 있는 불필요한 컴포넌트들을 거치지 않고 바로 필요한 컴포넌트에게 데이터를 줄 수 있죠.

 

💡 공식 설명

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

 

👉 번역: Context는 컴포넌트 트리 전체에 데이터를 전달할 수 있는 방법을 제공하며, 매 단계마다 props를 수동으로 전달할 필요가 없게 해줍니다.

 

🤔 왜 Context를 써야 할까?

1. Props Drilling 방지
   • 중간 컴포넌트가 필요 없는 데이터를 억지로 props로 받아 전달해야 하는 상황을 없앱니다.
2. 글로벌 상태 관리
   • 테마, 사용자 인증, 언어 설정 등 애플리케이션 전역에서 공유되는 데이터를 관리할 때 유용합니다.
3. 코드 간결화
   • props로 데이터를 계속 전달하는 반복적인 작업을 줄이고, 코드의 가독성을 높입니다.

---

🌳 Context의 기본 구조

React Context를 사용하려면 3가지 단계를 따라야 합니다:

1. Context 생성
   • React.createContext()로 Context를 만듭니다.
2. Provider로 값 전달
   • Context.Provider를 사용해 데이터를 제공합니다.
3. Consumer로 값 사용
   • Context.Consumer나 useContext 훅으로 데이터를 가져옵니다.

---

🛠️ 기본 예제

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

// 1. Context 생성
const ThemeContext = createContext();

// 2. Provider로 값 전달
function ThemeProvider({ children }) {
  const theme = 'dark';
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Consumer로 값 사용
function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
}

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

---

✨ Context 주요 개념

1. Provider

Provider는 Context의 값을 공급하는 역할을 합니다. Context를 사용하는 모든 컴포넌트는 Provider가 제공한 값을 참조합니다.

<ThemeContext.Provider value="light">
  <ChildComponent />
</ThemeContext.Provider>

2. Consumer

Consumer는 Context 값을 읽는 데 사용됩니다. useContext 훅으로 더 간편하게 대체할 수 있죠.

<ThemeContext.Consumer>
  {(value) => <div>The theme is {value}</div>}
</ThemeContext.Consumer>

3. useContext

React의 useContext 훅은 Context 값을 쉽게 가져오게 해줍니다. 훨씬 간단하죠.

const value = useContext(MyContext);

---

🌈 실전 활용 예제

1. 다크 모드 테마 관리

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

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

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Toggle to {theme === 'light' ? 'dark' : 'light'}
    </button>
  );
}

function ThemedComponent() {
  const { theme } = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
}

function App() {
  return (
    <ThemeProvider>
      <ThemeToggleButton />
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

 

2. 사용자 인증 관리

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

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

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = (username) => setUser({ username });
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function UserProfile() {
  const { user } = useContext(AuthContext);
  return <div>{user ? `Logged in as ${user.username}` : 'Not logged in'}</div>;
}

function LoginButton() {
  const { login } = useContext(AuthContext);
  return <button onClick={() => login('ReactDeveloper')}>Login</button>;
}

function LogoutButton() {
  const { logout } = useContext(AuthContext);
  return <button onClick={logout}>Logout</button>;
}

function App() {
  return (
    <AuthProvider>
      <UserProfile />
      <LoginButton />
      <LogoutButton />
    </AuthProvider>
  );
}

export default App;

---

⚠️ Context 사용 시 주의사항

1. 불필요한 렌더링
   • Context 값이 변경되면 Provider 하위의 모든 컴포넌트가 다시 렌더링됩니다.
   • 해결책: 값이 자주 변경되는 경우, Context 대신 상태 관리 라이브러리(Redux, Zustand 등)를 고려하세요.
2. 복잡한 구조
   • Context를 여러 개 중첩해서 사용하면 코드가 복잡해질 수 있습니다.
   • 해결책: Provider를 여러 컴포넌트로 나누어 관리하거나, useReducer와 함께 사용하세요.

---

🎯 요약

1. Context란?
   • 컴포넌트 트리 전체에 데이터를 전달하는 React의 강력한 기능
2. 언제 쓰나?
   • Props drilling을 방지하고, 글로벌 데이터를 관리해야 할 때
3. 구조와 핵심 개념
   • createContext, Provider, useContext
4. 실전에서 유용한 패턴
   • 테마 관리, 사용자 인증 등.

 

🌷 전설의 개발자가 되어봅시당! 🌷