createContext

 

🎯 createContext란 무엇일까요?

**createContext**는 React에서 여러 컴포넌트들이 데이터를 쉽게 공유할 수 있도록 도와주는 도구예요.
어떤 데이터를 부모 → 자식 → 손자처럼 여러 단계로 전달해야 할 때, 이를 단순화해주는 역할을 합니다.

 

🍔 비유로 이해하기: 햄버거 가게 이야기

여러분이 햄버거 가게에서 일한다고 생각해 봅시다. 🍔

1. 기본 전달 방식: 직접 전달하기
   • **주방장(부모 컴포넌트)**이 재료(데이터)를 준비하고,
   • 직원A → 직원B → 직원C에게 순서대로 전달해야 해요.
   • 중간 직원들이 매번 재료를 받아서 다시 전달해야 하니까 복잡하고 번거롭겠죠?
2. createContext를 사용하면?
   • 주방장(부모 컴포넌트)이 **모든 직원(모든 컴포넌트)**에게 재료를 한 번에 공유할 수 있는 **공유 창고(Context)**를 만들어 줍니다.
   • 직원들은 창고에서 필요한 재료를 바로 꺼내 쓸 수 있어요.
   • 중간 직원들이 전달할 필요가 없어져서 훨씬 편리해집니다!

 

🛠️ createContext 사용법

이제 createContext를 코드로 어떻게 사용하는지 알아볼게요.
예를 들어, 사용자 정보를 여러 컴포넌트에서 공유한다고 가정해 보겠습니다.

 

1. Context 만들기

먼저 createContext를 사용해서 데이터를 담을 공유 창고를 만듭니다.

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

// Context 생성
export const UserContext = createContext(null);

export function UserProvider({ children }) {
  const [user, setUser] = useState({ name: '홍길동', age: 25 });

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

설명:

• createContext(null): UserContext라는 공유 창고를 만듭니다. 초기값은 null이에요.
• UserProvider: UserContext.Provider를 사용해서 user 데이터를 제공하는 공급자 컴포넌트를 만들어요.
• value: value 속성을 통해 공유할 데이터를 설정합니다. 여기서는 user와 setUser를 제공해요.

2. Context 공급자 적용하기

UserProvider를 최상위 컴포넌트에 적용해서 모든 하위 컴포넌트가 데이터를 사용할 수 있게 해줍니다.

import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './UserProfile';

function App() {
  return (
    <UserProvider>
      <div>
        <h1>Context 예제</h1>
        <UserProfile />
      </div>
    </UserProvider>
  );
}

export default App;

설명:

• **UserProvider**로 앱 전체를 감싸줍니다.
• 이렇게 하면 모든 하위 컴포넌트가 UserContext에 접근할 수 있게 돼요.

 

3. Context 사용하기

이제 하위 컴포넌트에서 useContext를 사용해 데이터를 꺼내와서 사용하면 됩니다.

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

function UserProfile() {
  const { user, setUser } = useContext(UserContext); // Context 사용

  const handleChangeName = () => {
    setUser({ ...user, name: '이순신' }); // 이름 변경
  };

  return (
    <div>
      <h2>사용자 정보</h2>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
      <button onClick={handleChangeName}>이름 변경</button>
    </div>
  );
}

export default UserProfile;

설명:

• useContext(UserContext): UserContext에 저장된 데이터를 가져옵니다.
• 버튼을 클릭하면 setUser를 사용해 user의 이름을 변경하고 화면에 반영합니다.

 

🚀 결과 화면

1. 화면에 이름과 나이가 표시됩니다.
2. "이름 변경" 버튼을 누르면 이름이 **"이순신"**으로 바뀝니다.

 

🌟 createContext를 사용하면 좋은 점

1. 중간 컴포넌트를 거치지 않아도 돼요
   • 데이터를 여러 단계로 전달할 필요 없이 필요한 곳에서 바로 사용할 수 있어요.
2. 코드가 깔끔해져요
   • props를 계속 전달하는 대신 Context를 사용하면 코드가 더 간결해집니다.
3. 데이터의 일관성 유지
   • 중앙에서 데이터를 관리하니까 여러 컴포넌트가 같은 데이터를 일관되게 사용할 수 있어요.

 

🎉 마무리

React의 **createContext**는 여러 컴포넌트가 데이터를 쉽게 공유할 수 있도록 도와주는 도구입니다.

• **"공유 창고"**를 만들어서 필요한 컴포넌트가 바로 데이터를 가져다 쓸 수 있어요.
• useContext를 사용하면 데이터를 꺼내 쓰는 것도 아주 간단합니다.