7/29 TIL

1. Context API 소개

React의 Context API는 컴포넌트 트리 전반에 걸쳐 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 prop drilling을 피하고, 상태 관리가 필요한 데이터를 전역적으로 관리할 수 있습니다.

2. Context API 만들기

2.1. Context 생성

Context를 만들기 위해 createContext 함수를 사용합니다.

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

// Context 생성
const MyContext = createContext<any>(null);

// Provider 컴포넌트 생성
export const MyProvider = ({ children }: { children: React.ReactNode }) => {
  const [value, setValue] = useState<string>('초기값');

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

// Context 사용을 위한 커스텀 훅
export const useMyContext = () => {
  return useContext(MyContext);
};

3. Context 사용하기

Context를 사용하기 위해서는 Provider로 감싸고, 필요한 컴포넌트에서 useContext를 통해 데이터를 사용합니다.

3.1. Provider로 감싸기

앱의 루트 또는 필요한 부분에서 Provider로 감쌉니다.

import React from 'react';
import { MyProvider } from './MyContext'; // Context 파일 import
import App from './App';

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

export default Root;

3.2. Context 데이터 사용하기

이제 useMyContext 훅을 사용하여 데이터를 가져오고 업데이트할 수 있습니다.

import React from 'react';
import { useMyContext } from './MyContext';

const MyComponent = () => {
  const { value, setValue } = useMyContext();

  return (
    <div>
      <h1>{value}</h1>
      <button onClick={() => setValue('새로운 값')}>값 변경</button>
    </div>
  );
};

export default MyComponent;

4. 예제: PageTitle Context 만들기

아래는 PageTitle을 관리하기 위한 Context API의 예시입니다.

4.1. PageTitleContext.tsx

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

const PageTitleContext = createContext<any>(null);

export const PageTitleProvider = ({ children }: { children: React.ReactNode }) => {
  const [title, setTitle] = useState<string>('기본 제목');

  return (
    <PageTitleContext.Provider value={{ title, setTitle }}>
      {children}
    </PageTitleContext.Provider>
  );
};

export const usePageTitle = () => {
  return useContext(PageTitleContext);
};

4.2. PageTitle 컴포넌트

import React from 'react';
import { usePageTitle } from '@/contexts/PageTitleContext';

const PageTitle = () => {
  const { title } = usePageTitle();

  return <h1>{title}</h1>;
};

export default PageTitle;

4.3. 사용 예시

import React from 'react';
import { PageTitleProvider } from '@/contexts/PageTitleContext';
import PageTitle from '@/components/atoms/PageTitle';

const App = () => {
  return (
    <PageTitleProvider>
      <PageTitle />
    </PageTitleProvider>
  );
};

export default App;