useContext

 

🎯 useContext란 무엇일까?

**useContext**는 React 컴포넌트들 사이에서 데이터를 쉽게 공유할 수 있게 도와주는 도구예요.

React에서는 **"상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달"**할 때 props를 사용하죠.
그런데 컴포넌트가 많아지면 데이터 전달이 점점 귀찮아져요.
마치 릴레이 경주처럼 데이터를 계속 넘겨줘야 하니까요!

useContext를 사용하면 중간에 데이터를 넘겨줄 필요 없이 바로 원하는 컴포넌트에 데이터를 전달할 수 있어요.

 

🍔 햄버거 가게 이야기로 이해해보자

여러분이 햄버거 가게를 운영한다고 생각해 보세요. 🍔
이번엔 **햄버거의 "소스"**를 예로 들어 볼게요!

 

1. props로 전달하는 경우 (불편한 상황)

상위 컴포넌트(주방)에서 소스 정보를 하위 컴포넌트(테이블)에 전달해야 한다고 상상해 봅시다.

• 주방 → 홀 매니저 → 서빙 직원 → 테이블 손님
• 데이터(소스)를 계속 릴레이로 넘겨야 해요. 너무 번거롭죠?

코드로 보면 이렇게 됩니다:

function Kitchen() {
  const sauce = "치즈 소스";

  return <Manager sauce={sauce} />;
}

function Manager({ sauce }) {
  return <Server sauce={sauce} />;
}

function Server({ sauce }) {
  return <Table sauce={sauce} />;
}

function Table({ sauce }) {
  return <p>테이블에 제공된 소스: {sauce}</p>;
}

 

여기서 문제점!

• 소스를 전달하려면 모든 중간 단계 컴포넌트에서 props를 넘겨줘야 해요.
• 중간 단계가 많을수록 코드가 복잡해져요.

2. useContext를 사용하면? (간편한 상황)

useContext를 사용하면 중간 단계 없이 바로 **필요한 곳에 데이터(소스)**를 전달할 수 있어요.
직접 테이블에 소스를 가져다주는 느낌이죠!

 

🛠️ useContext 코드 예시

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

// 소스를 저장할 Context를 만들어요
const SauceContext = createContext();

function Kitchen() {
  const sauce = "치즈 소스"; // 주방에서 만든 소스

  return (
    // SauceContext에 소스를 제공해요
    <SauceContext.Provider value={sauce}>
      <Table />
    </SauceContext.Provider>
  );
}

function Table() {
  // useContext를 사용해서 소스를 가져와요
  const sauce = useContext(SauceContext);

  return <p>테이블에 제공된 소스: {sauce}</p>;
}

export default Kitchen;

 

🔍 코드에서 무슨 일이 일어날까?

1. createContext():
   • SauceContext라는 데이터 저장소를 만들어요.
     여기서 "소스 정보"를 관리해요.
2. SauceContext.Provider:
   • Provider는 소스를 제공하는 역할을 해요.
   • <SauceContext.Provider value={sauce}>에서 value에 소스를 넣어주죠.
3. useContext(SauceContext):
   • useContext를 사용하면 Context에 저장된 소스를 바로 가져올 수 있어요.
   • 중간 단계 없이 바로 접근하니까 코드가 깔끔하죠!

🌟 이해를 돕는 비유

useContext는 마치 **"공용 냉장고"**와 같아요.

• 주방(상위 컴포넌트)이 냉장고(Context)에 소스를 넣어둡니다.
• 테이블(하위 컴포넌트)은 이 냉장고에서 필요한 소스를 꺼내 쓰면 돼요.

**중간에 전달하는 사람(매니저, 서빙 직원)**이 필요 없어요!

 

🚀 한 줄 요약

useContext는 데이터를 중간 단계 없이 여러 컴포넌트에서 쉽게 공유할 수 있도록 도와주는 도구예요.