React의 Context API는 전역적으로 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 prop-drilling(하위 컴포넌트에게 props를 계속 전달하는 것) 문제를 해결할 수 있습니다.

먼저, 색상을 저장하고 변경할 수 있는 Context를 생성합니다. 그 다음, 이 Context를 사용하는 Provider 컴포넌트를 만들고, 이를 애플리케이션의 상위에서 사용합니다. 마지막으로, Context에서 색상을 읽고 변경하는 컴포넌트를 만들어서 Provider 컴포넌트의 하위에 배치합니다.

1. Context 생성

먼저, color 값을 저장할 Context를 만듭니다. 이 Context는 공유하고자 하는 데이터와 그 데이터를 업데이트하는 함수를 포함합니다.

// ColorContext.tsx
'use client';

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

export type Color = 'white' | 'black';

interface ColorContextProps {
  color: 'white' | 'black';
  setColor: (color: Color) => void;
}

export const ColorContext = createContext<ColorContextProps>({
  color: 'white', // 기본값
  setColor: () => {}, // 빈 함수
});

export const ColorProvider = ({ children }: { children: React.ReactNode }) => {
  const [color, setColor] = useState<Color>('white');
  return (
    <ColorContext.Provider value={{ color, setColor }}>
      {children}
    </ColorContext.Provider>
  );
};

export const useColor = () => useContext(ColorContext);

2. Provider를 사용하여 컴포넌트 감싸기

ColorProvider를 사용하여 상태를 사용할 ColorComponent를 감싸줍니다.

// App.tsx
import ColorComponent from './ColorComponent';
import { ColorProvider } from './ColorContext';

export default function App() {
  return (
    <ColorProvider>
      <ColorComponent />
    </ColorProvider>
  );
}

3. Color 상태를 사용하는 컴포넌트 만들기

ColorComponent를 만들고 useColor 훅을 사용하여 color 상태를 읽고 변경할 수 있습니다.

// ColorComponent.tsx
'use client';

import { useColor } from './ColorContext';

export default function ColorComponent() {
  const { color, setColor } = useColor();

  return (
    <div>
      <p>Current color: {color}</p>
      <div className="mt-10 flex gap-x-2">
        <button
          onClick={() => setColor('black')}
          className="border border-gray-600 p-2"
        >
          Change to Black
        </button>
        <button
          onClick={() => setColor('white')}
          className="border border-gray-600 p-2"
        >
          Change to White
        </button>
      </div>
    </div>
  );
}

Context를 사용하지만 매번 사용방법을 잊게 되어서 이렇게 글을 작성해 봅니다.