Context API

---

Context API란?

React version 16부터 사용 가능한 리액트의 내장 API

=> 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유할 수 있게 해준다.
=> 따라서 앱의 모든 컴포넌트에서 사용할 수 있는 데이터(state)를 전달할 때 유용하다.

Context API는 언제 사용할까?

리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props를 통해 데이터를 전달한다. 하지만 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트에서 동일한 데이터를 필요로 하는 경우에는 props를 활용하기 불편한 상황이 생긴다. 계속 props로 넘겨줘야 하는 prop drilling을 해야만 하기 때문이다.
=> 이 때 Context API를 활용하면 그런 불편함을 해소할 수 있다.

Context API를 이용해 중간 컴포넌트를 건너뛰고 바로 대상 컴포넌트로 데이터를 전달할 수 있다.
=> 깊이 여부와 무관하게 데이터가 필요한 컴포넌트에서만 불러다가 사용할 수 있는 것이다.

Context API 사용방법

1. createContext 메서드를 사용하여 context 객체를 생성한다.

ThemeContext를 생성한다. 기본값을 설정할 수도 있다.

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

// Context 객체 생성
const ThemeContext = createContext();

2. 생성한 context를 대상 컴포넌트에 값을 내려주기 위해서 Provider로 대상 컴포넌트를 감싼다. (Provider로 데이터 제공)

ThemeProvider는 ThemeContext.Provider를 사용하여 theme와 toggleTheme 함수를 하위 컴포넌트에 제공한다.

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider, ThemeContext };

3. Consumer 컴포넌트를 작성한다.

useContext 훅을 사용하여 ThemeContext의 값을 소비한다. 현재 테마에 따라 배경과 텍스트 색상을 변경하고, 버튼 클릭 시 테마를 전환한다.

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>The current theme is {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

4. 앱에서 Provider를 사용한다.

ThemeProvider를 사용하여 ThemedComponent가 ThemeContext의 값을 사용할 수 있도록 한다.

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from './ThemeContext';
import ThemedComponent from './ThemedComponent';

const App = () => (
  <ThemeProvider>
    <ThemedComponent />
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));