[240522 TIL] Context API

오늘은 과제 주차 중 가계부 props drilling 버전을 Context API 버전으로 리팩토링 해보았습니다.

이 과정에서 Context API에 익숙치 않아 살짝 어려움도 겪었습니다.
Context API 의 정확한 사용법에 대해 정리해 보려고 합니다.

Context API는 전역 상태를 관리하기 위한 강력한 도구입니다.
Context를 사용하면 prop drilling을 피하고, 여러 컴포넌트 계층에 데이터를 전달할 수 있습니다.

1. Context 생성하기

먼저, Context를 생성합니다. 일반적으로 Context를 정의하는 파일을 따로 만들어 관리합니다.

// context.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

2. Provider 설정하기

Context Provider를 사용하여 Context 값을 설정하고 하위 컴포넌트에 전달합니다.
Provider는 트리의 하위 컴포넌트들이 해당 Context를 구독할 수 있도록 해줍니다.

// App.js
import React, { useState } from 'react';
import MyContext from './context';

function App() {
  const [value, setValue] = useState('Hello, Context!');

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

export default App;

3. useContext 훅 사용하기

하위 컴포넌트에서 Context의 값을 소비할 수 있습니다. 이를 위해 useContext 훅을 사용합니다.
(Context.Consumer도 사용할 수 있지만, useContext 훅이 더 간편하고 좋습니다.)

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

function ChildComponent() {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('New Value!')}>Change Value</button>
    </div>
  );
}

export default ChildComponent;

전체 코드 예시

context.js

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

App.js

import React, { useState } from 'react';
import MyContext from './context';
import ChildComponent from './ChildComponent';

function App() {
  const [value, setValue] = useState('Hello, Context!');

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

export default App;

ChildComponent.js

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

function ChildComponent() {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('New Value!')}>Change Value</button>
    </div>
  );
}

export default ChildComponent;

요약

1. Context 생성: React.createContext()를 사용하여 Context를 생성합니다.
2. Provider 설정: Context.Provider를 사용하여 하위 컴포넌트에 값을 제공합니다.
3. Consumer 사용: useContext 훅이나 Context.Consumer를 사용하여 Context의 값을 사용합니다.

Context.Consumer는 리액트의 Context API를 사용할 때 Context의 값을 접근하는 또 다른 방법입니다. useContext 훅을 사용하지 않는 경우, 클래스형 컴포넌트에서 주로 사용되거나, 함수형 컴포넌트에서도 사용될 수 있습니다.

추가 : Context.Consumer의 사용법

Context.Consumer는 함수 컴포넌트를 통해 값을 접근하며, 자식 컴포넌트에 함수 형태의 자식을 전달합니다.
이 함수는 Context의 현재 값을 인수로 받아 그 값을 이용해 JSX를 반환합니다.

예제

context.js

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

App.js

import React, { useState } from 'react';
import MyContext from './context';
import ChildComponent from './ChildComponent';

function App() {
  const [value, setValue] = useState('Hello, Context!');

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

export default App;

ChildComponent.js

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

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {({ value, setValue }) => (
        <div>
          <p>{value}</p>
          <button onClick={() => setValue('New Value!')}>Change Value</button>
        </div>
      )}
    </MyContext.Consumer>
  );
}

export default ChildComponent;

주요 특징

1. 함수형 자식: Consumer는 반드시 함수형 자식을 받아야 하며 이 함수는 Context의 값을 인수로 받습니다.
2. 클래스형 컴포넌트 호환: useContext 훅과 달리 클래스형 컴포넌트에서도 사용할 수 있습니다.

요약

• Context.Consumer를 사용하면 함수형 자식을 통해 Context 값을 접근할 수 있습니다.
• 함수형 컴포넌트뿐만 아니라 클래스형 컴포넌트에서도 유용하게 사용할 수 있습니다.
• useContext 훅이 더 간편하고 많이 사용되지만, Context.Consumer는 유연성과 가독성을 제공하는 경우가 있습니다.