[React]Context API

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.Context API

React에서 전역적으로 데이터를 관리하고 전달할 수 있는 기능입니다.
이를 통해 중간 컴포넌트를 거치지 않고도 트리 구조의 하위 컴포넌트에 데이터를 쉽게 전달할 수 있습니다.
주로 테마나 사용자 정보, 언어 설정과 같은 데이터를 여러 컴포넌트에 전달할 때 유용합니다.

 

 

 

2.Context API 생성과정 

2-1.Context 생성

React.createContext로 새로운 Context를 생성합니다.

import React from 'react';

// ThemeContext라는 Context를 생성합니다.
const ThemeContext = React.createContext('light');

export default ThemeContext;

 

 

 

2-2.Provider

Context를 사용할 하위 컴포넌트들에게 데이터를 제공하기 위해 Provider를 사용합니다.

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

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

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

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

export default ThemeProvider;

 

 

 

 

 

2-3.Consumer

제공된 데이터를 소비하는 방법으로, Consumer 또는 useContext 훅을 사용합니다.

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

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div>
      <button onClick={toggleTheme}>
        현재 테마: {theme}
      </button>
    </div>
  );
}

export default ThemedButton;

 

 

2-4.APP에 적용

import React from 'react';
import ThemeProvider from './ThemeProvider';
import ThemedButton from './ThemedButton';

function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

export default App;