React Context API 완전정복｜컴포넌트 간 전역 상태 공유 & useContext 실전 예제

📘 리액트 스터디 시리즈 9편

Context API 완전정복｜컴포넌트 간 전역 상태 공유하기

안녕하세요! 이번 편에서는 컴포넌트 간 전역 상태를 공유할 수 있는

Context API

에 대해 배웁니다 🎯

prop drilling 없이 상위 → 하위로 데이터 전달하는 강력한 방법! Redux를 쓰지 않고도 충분한 상황에서 아주 유용하게 쓰입니다 💡

---

🔧 1. Context란 무엇인가요?

Context는 리액트에서 컴포넌트 트리 안에서 전역으로 데이터를 전달할 수 있게 해주는 API입니다.

const MyContext = React.createContext(defaultValue);

Context를 사용하면 props 없이도 깊은 컴포넌트 트리까지 값을 전달할 수 있습니다.

---

📦 2. Context 기본 사용법

다음은 사용자 정보를 전역으로 관리하는 예제입니다:

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

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

// 2. Provider 컴포넌트 생성
function UserProvider({ children }) {
  const [user, setUser] = useState({ name: '홍길동', age: 25 });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 3. 하위 컴포넌트에서 사용
function UserProfile() {
  const { user } = useContext(UserContext);
  return <p>사용자 이름: {user.name}</p>;
}

• ✅ createContext()로 Context 객체 생성
• ✅ Provider로 하위 컴포넌트를 감싸서 값 전달
• ✅ useContext()로 하위에서 값 꺼내쓰기

---

📋 실전 구성 예제

function App() {
  return (
    <UserProvider>
      <Header />
      <Main />
    </UserProvider>
  );
}

function Header() {
  const { user } = useContext(UserContext);
  return <h1>안녕하세요, {user.name}님!</h1>;
}

function Main() {
  return <UserProfile />;
}

💡 이제 user 상태를 props 없이 여러 컴포넌트에서 공유할 수 있습니다!

---

🧩 추가 팁

• 📌 Context는 리렌더링 범위를 넓힐 수 있으므로 과도한 사용은 지양
• 📌 값이 자주 바뀌는 경우 memoization 고려
• 📌 React.memo, useMemo와 함께 사용하면 성능 향상

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ Context는 컴포넌트 트리 전역 상태 공유용 API
• ✔️ Provider로 감싸고 useContext로 꺼내쓰기
• ✔️ 상태를 여러 하위 컴포넌트에서 자유롭게 활용 가능
• ✔️ 성능 고려 시 memoization도 함께 고려!

---

📌 다음 편 예고

10편에서는 리액트의 고급 Hook – useRef와 useMemo를 배웁니다!

렌더링 성능을 개선하고 DOM 요소를 직접 다루는 방법, 드디어 고급자 단계로 접어듭니다! 🚀

---

💬 오늘 내용이 어려우셨나요? 댓글로 질문 주시면 함께 고민해드릴게요 😄