[React] useContext와 Context API

useContext

React는 대개 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 data를 전달하는 구조이다. 

 

App의 규모가 작으면 props로 충분하지만 규모가 커지면 필요없는 상위 컴포넌트들이 하위 컴포넌트들에게 props를 전달해주기 위해 props를 가지고 있어야 되고 props의 이름을 수정하게 된다면 일일이 다 수정해줘야 하므로 유지보수하기 힘들고 복잡해진다.

또한 테마나 언어와 같은 전역적인 data 같은 경우 모든 컴포넌트가 이 data를 갖고 있어야 하므로 단계별로 전달해야하는 props로만 data를 관리하는 건 어렵다. 

 

이를 해결하기 위해 Context API를 사용하는데 Context는 App 안에서 전역적으로 사용되는 data들을 여러 컴포넌트들이 쉽게 공유할 수 있는 방법을 제공해준다.

Context를 사용하면 전역적인 data를 필요로 하는 컴포넌트가 어디에 위치해 있든 상관없이 data를 제공해 줄 수 있다. 

 

하지만 context를 사용하면 컴포넌트를 재사용하기 어려우므로 context는 필요할 때만 사용해야 한다.

 

 

사용법

createContext 로 context 생성 

// src/context/ThemeContext.js

import { createContext } from 'react';

export const ThemeContext = createContext(null);

 

createContext 인자로 초기값을 넣어준다. 

이 초기값은 다른 컴포넌트에서 ThemeContext를 useContext를 통해 다음과 같이 가져왔는데 

const data = useContext(ThemeContext);

 

상위 컴포넌트에서 해당 컴포넌트를 ThemeContext.Provider 태그로 감싸지 않았을 경우 초기값을 data에 넘겨준다. 

 

context 설정 

// src/App.js

import { ThemeContext } from './context/ThemeContext';
import Page from './components/Page';

function App() {
  const [isDark, setIsDark] = useState(false);
    
  return (
    <ThemeContext.Provider value={{isDark, setIsDark}}>
      <Page />
    </ThemeContext.Provider>
  );
}

 

이렇게 해주면 ThemeContext.Provider 태그가 감싸는 모든 하위 컴포넌트들은 value로 넣어준 isDark와 setIsDark를 사용할 수 있게 된다. 

 

useContext를 통해 context 사용

// src/components/Page.jsx

import React from 'react';
import Home from './Home';

const Page() {
  return (
    <div>
      <Home />
    </div>
  );
}

// src/components/Home.jsx

import React from 'react';
import { ThemeContext } from '../context/ThemeContext';

const Home() {
  const { isDark, setIsDark } = useContext(ThemeContext);
    
  const toggleTheme = () => {	
    setIsDark(!isDark);
  }
    
  return (
    <div
      style={{
        backgroundColor: isDark ? 'black' : 'lightgray',
      }}
    >
      <button onClick={toggleTheme}>
        Dark Mode
      </button>
    </div>
  );
}

 

 

 

 

---

출처 : 유튜브 별코딩 (직접 듣기 강추!)