React useContext 사용법

useContext는 React의 Context API를 사용하여 컴포넌트 트리 전체에 걸쳐 데이터를 전달할 수 있는 훅입니다. 전역 상태를 관리할 때 유용하며, props drilling(여러 컴포넌트를 거쳐 props를 전달하는 것)의 번거로움을 줄여줍니다.

useContext를 사용하는 방법은 다음과 같습니다:

1. Context 생성하기: React.createContext()를 사용하여 Context를 생성합니다. 이것은 Context 객체를 반환하고, 이 객체는 Provider와 Consumer 컴포넌트를 포함합니다.

import React from 'react';

// 초기값(여기서는 빈 객체)과 함께 Context 생성
const MyContext = React.createContext({});

2. Provider를 사용하여 값 제공하기: Provider를 사용하여 Context의 값을 정의하고, 이 값을 하위 컴포넌트들과 공유합니다.

const App = () => {
  const contextValue = {
    user: 'Alice',
    isAuthenticated: true,
  };

  return (
    <MyContext.Provider value={contextValue}>
      {/* 이 안에 있는 컴포넌트들은 MyContext의 값을 사용할 수 있음 */}
      <MyComponent />
    </MyContext.Provider>
  );
};

3. useContext로 Context 사용하기: 하위 컴포넌트에서 useContext 훅과 Context 객체를 사용하여 값에 접근합니다.

import React, { useContext } from 'react';

const MyComponent = () => {
  // MyContext에서 제공하는 값을 가져옴
  const context = useContext(MyContext);

  return <div>User: {context.user}</div>;
};

useContext 훅을 사용하면, 컴포넌트가 Provider에 의해 전달된 값을 읽을 수 있습니다. Provider는 컴포넌트 트리 어디에서나 사용될 수 있으며, 하위 컴포넌트들은 가장 가까운 상위 Provider의 값을 사용하게 됩니다. 값이 변경되면, 해당 Context를 사용하는 모든 컴포넌트들이 리렌더링됩니다.

이 방법은 로그인 상태, 테마, 언어 설정 등 앱의 여러 부분에서 공유되어야 하는 상태를 관리할 때 특히 유용합니다.