Context API란?

Context API란?

Context API 는 리엑트(React)에서 전역적으로 데이터를 관리하고 전달하는 데 사용합니다.

리엑트 애플리케이션에서는 상태(state)와 props를 이용해 컴포넌트간에 데이터를 전달하지만

컴포넌트 계층이 깊어질수록 상위 컴포넌트에서 하위 컴포넌트로 props를 계속 전달하는 것이 번거러워집니다.

이러한 경우를 해결하기 위해 Context API를 사용하면 중간에 위치한 컴포넌트들을 거치지 않고 데이터를

여러 컴포넌트에 쉽게 전달이 가능합니다.

언제 Context API를 사용하나요?

1. 전역 상태 관리가 필요할때
2. Prop driling을 피하고 싶을 때
   Prop driling이란 데이터를 여러 계층의 컴포넌트를 통해 전달해야 하는 상황을 의미합니다.
3. 애플리케이션의 특정 상태나 데이터를 쉽게 공유해야 할 때
   리렌더링의 비용이 낮은 경우에 Context API를 사용하면 코드가 훨씬 간결해집니다.

Context API 사용방법

createContext로 전역상태 만들기 (간단한 예시코드)

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

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

// 2. Provider로 전역 상태 연결
export const MyProvider = ({ children }) => {
  const [state, setState] = useState("Hello, World!");

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

1. createContext() 로 Context생성

   export const MyContext = createContext();

   createContext()는 새로운 Context 객체를 생성합니다.

   MyContext 객체는 Provider와 Consumer를 가지고 있으며 여기서는 주로 Provider를 사용합니다.

   MyContext를 export함으로써 다른 컴포넌트에서도 이 Context를 사용할 수 있습니다.

2. Provider로 전역 상태 연결

   export const MyProvider = ({ children }) => {
     const [state, setState] = useState("Hello, World!");
   
     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };

   MyProvider는 Context의 Provider를 사용하는 컴포넌트입니다.
   컴포넌트를 통해 하위 컴포넌트들에 전역 상태를 전달합니다.

   useState 훅을 사용해 state와 setState를 정의하고
   초기값은 "Hello, World!"로 설정되어 있습니다.
   [state: 전역으로 관리하고자 하는 상태 값입니다.]

   [setState: 상태 값을 업데이트하는 함수입니다.]

   MyContext.Provider는 value prop을 통해 하위 컴포넌트들에게 제공하고자 하는 데이터를 전달합니다.

   value는 객체 형태로 전달되며 이 예제에서는 state와 setState를 함께 전달하고 있습니다.

   {children}은 MyProvider 컴포넌트의 자식 컴포넌트들을 의미합니다.
   Provider를 통해 전달된 상태와 함수를 이 자식 컴포넌트들이 사용할 수 있게 됩니다.

Provider로 전역 상태 연결(간단예제)

import React from 'react';
import { MyProvider } from './MyContext';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

export default App;

1. MyProvider로 전역 상태 감싸기

   <MyProvider>
     <MyComponent />
   </MyProvider>

   MyProvider는 MyContext의 Provider 컴포넌트입니다.

   MyProvider 안에 있는 모든 하위 컴포넌트들은 MyProvider에서 정의된 상태와 함수를 사용할 수 있습니다.

   MyComponent는 MyProvider의 자식 컴포넌트로 MyProvider가 제공하는 state와 setState를 사용할 수 있는 상태가 됩니다.

useContext로 전역 상태 가져오기(간단예제)

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

const MyComponent = () => {
  // useContext를 사용하여 전역 상태 가져오기
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState("Hello, React Context!")}>
        Update State
      </button>
    </div>
  );
};

export default MyComponent;

1. MyComponent 컴포넌트 정의

   const MyComponent = () => {
     // useContext를 사용하여 전역 상태 가져오기
     const { state, setState } = useContext(MyContext);

   useContext 훅을 사용하여 MyContext에서 제공된 값을 가져옵니다.
   state: MyProvider에서 제공된 전역 상태입니다.
   MyProvider에서 설정된 상태(useState의 초기값인 "Hello, World!")를 가리킵니다.

   setState: 상태를 업데이트하는 함수입니다.
   useContext를 사용하면 함수형 컴포넌트 내에서 직접적으로 Context의 값을 쉽게 사용할 수 있습니다.