리액트 초보도 쉽게 따라하는 Context API 사용법!

리액트로 개발하다 보면 컴포넌트(리액트에서 UI를 구성하는 기본 단위) 간에 데이터를 주고받는 게 복잡해질 수 있어요. 이럴 때 Context API를 사용하면 정말 편리하답니다! 제가 공부한 내용을 토대로 설명드릴게요 😊

---

🚀 Context API란?

Context API는 리액트에서 여러 컴포넌트가 공유할 수 있는 데이터를 쉽게 관리할 수 있게 도와주는 도구예요. 예를 들어, 앱의 모든 컴포넌트에서 현재 로그인한 사용자 정보를 사용할 때 유용해요.

 

🤔 Context API를 언제 사용해야 할까요?

Context API는 다음과 같은 상황에서 사용하면 좋아요:

1. 여러 컴포넌트에서 같은 데이터를 사용해야 할 때: 예를 들어, 사용자 정보나 테마 설정 같은 걸 여러 컴포넌트에서 사용해야 할 때.
2. Prop drilling을 피하고 싶을 때: 데이터를 여러 컴포넌트에 전달할 때, 중간 단계 컴포넌트들이 필요하지 않은 데이터를 받아서 전달만 해야 하는 상황을 피할 수 있어요.

 

🔧 기본 사용법

Context API를 사용하는 방법을 단계별로 쉽게 설명해드릴게요.

1. Context 생성하기

먼저 Context를 만들어야 해요. React.createContext()를 사용하면 돼요.

import React, { createContext } from 'react';

// MyContext라는 이름의 Context를 생성해요.
const MyContext = createContext();

2. Provider 컴포넌트 만들기

Provider는 데이터를 공급하는 역할을 해요. Provider는 Context의 값을 설정하고, 이 값을 하위 컴포넌트들에게 전달해줘요.

import React, { createContext } from 'react';

// MyContext라는 이름의 Context를 생성해요.
const MyContext = createContext();

const App = () => {
  // 우리가 공유하고 싶은 데이터를 value에 넣어요.
  const value = { name: 'React' };

  return (
    // MyContext.Provider를 사용해서 하위 컴포넌트들에게 데이터를 전달해요.
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

3. useContext 훅으로 데이터 사용하기

하위 컴포넌트에서 Context의 데이터를 사용하려면 useContext 훅을 사용하면 돼요.

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

const ChildComponent = () => {
  // useContext 훅을 사용해서 Context의 값을 가져와요.
  const context = useContext(MyContext);

  return <div>{context.name}</div>;
};

 

---

💡 요약

• Context API는 리액트에서 전역 상태를 관리하는 도구예요.
• Provider는 데이터를 공급하는 역할을 해요.
• useContext 훅을 사용해서 하위 컴포넌트에서 데이터를 가져올 수 있어요.
• Context API를 사용하면 여러 컴포넌트가 쉽게 데이터를 공유할 수 있어요.