리액트 애플리케이션을 개발하다보면 상태나 함수 등을 여러 컴포넌트 간에 공유해야 하는 경우가 있습니다. 이때 Context API를 사용하면 전역 상태를 효과적으로 관리할 수 있습니다. 리액트 훅에서 Context API를 사용하는 방법을 알아보겠습니다.

Context API 소개

Context API는 리액트 애플리케이션에서 전역적인 데이터를 공유하기 위한 방법을 제공합니다. 이를 통해 prop drilling을 피하고, 컴포넌트 간의 의존성을 줄일 수 있습니다.

createContext 함수

Context API를 사용하려면 먼저 createContext 함수를 사용하여 새로운 context를 생성해야 합니다. 이 함수는 context 객체를 반환하며, Provider 및 Consumer 컴포넌트를 포함하고 있습니다.

import React from 'react';

const MyContext = React.createContext();
export default MyContext;

위 예제에서 createContext 함수를 사용하여 새로운 context 객체를 생성하고 MyContext로 내보냈습니다.

useContext 훅 사용하기

리액트 16.8부터 도입된 훅을 사용하여 Context API를 손쉽게 활용할 수 있습니다. useContext 훅을 활용하면 해당 context의 값을 손쉽게 조회할 수 있습니다.

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

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

위 예제에서 useContext 훅을 사용하여 MyContext의 값을 value 변수에 할당하고, 해당 값을 화면에 렌더링했습니다.

Provider 제공하기

마지막으로, Provider 컴포넌트를 사용하여 해당 context의 값을 제공할 수 있습니다.

import React from 'react';
import MyContext from './MyContext';

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <MyComponent />
    </MyContext.Provider>
  );
}

위 예제에서 Provider 컴포넌트를 사용하여 MyContext의 값을 제공하고, 하위 컴포넌트에서 해당 값을 사용할 수 있도록 했습니다.

리액트 훅에서 Context API를 사용하는 방법에 대해 알아보았습니다. Context API를 사용하면 전역 상태를 관리하고, 컴포넌트 간의 의존성을 줄일 수 있습니다.

참고 자료: 리액트 문서 - Context