[React] Context API를 위한 useContext hook

이번에는 React내 useContext에 대해 알아보자.

React에서 데이터는 일반적으로 위에서 아래로 흐른다.
global data를 단계적으로 일일이 내려주는 작업은 정말 귀찮다.

예시코드를 보자..

import Content from './Content';
import Header from './Header';
import Footer from './Footer';

export default function Page({ isDark, setIsDark }) {
  return (
    <div>
      <Header isDark={isDark} />
      <Content isDark={isDark} />
      <Footer
        isDark={isDark}
        setIsDark={setIsDark}
      />
    </div>
  );
}

 

Page 컴퍼넌트에서는 isDark라는 props를 전혀 사용하지 않고 있다.
하지만 다음 컴퍼넌트(Header,Content,Footer)에서 해당 prop이 사용된다. Page컴퍼는 그저 prop을 넘겨주기만 하는 중간 다리 역할만 하고 있다.
(그리고 그 중간 다리 역할을 하기 위해 isDark={isDark}와 같은 작업을 하나씩 해줘야하기 때문에 매우 귀찮다.)

여기선 그냥 Header,Content,Footer 에서 isDark가 바로 쓰일 수 있다면 정말 좋겠다.

이 문제를 간단하게 해결해주는게 useContext다.

props로 일일이 전달해주지 않아도, 관련 데이터를 써야하는 컴퍼넌트가 간편하게 데이터에 접근할 수 있다.

 

 

App에 있는 데이터를 C,E에 전달하려면 상위에서 아래로 하나씩 내려줘야하는데 이를 data drilling이라고 한다.
앞서 봤던 Page컴퍼넌트가 여기에서 A쯤이 되겠다.
useContext를 사용한다면 이러한 문제를 방지할 수 있다.

 

다시 코드로 보자...

01. DarkContext.js

import { createContext } from 'react'; // context를 가져오기 위해 필요한 거

export const DarkContext = createContext(null);  // 현재 초기값이 null로 되어있다.

Context를 정의해주자.

02. App.js

import { useEffect, useState } from 'react';

import './App.css';
import Page from './component/Page';
import { DarkContext } from './context/DarkContext'; // 만든 컨텍스트를 가져온다.

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    // 컨텍스트를 provider를 활용해 담는다.
    <DarkContext.Provider value={{ isDark, setIsDark }}>
      <Page />
    </DarkContext.Provider>
  );
}

export default App;

DarkContext.Provider로 관련 데이터가쓰일 곳 위를 감싸준다.

03. Page.jsx

import Content from './Content';
import Header from './Header';
import Footer from './Footer';


//  현재 isDark라는 애가 너무 많이 사용되고 있어
// 중간 component다.
export default function Page() {
  // 이렇게 컨텍스트를 받아올 수 있다. (app.jsx에서 provider로 넘긴 값이..)


  return (
    <div className="page">
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

useContext를 사용하지 않았을 때보다 더 간단해졌다.
여기에선 DarkContext관련 내용이 눈 씻고 찾아봐도 없다.

04. Footer.jsx

import { useContext } from 'react';
import { DarkContext } from '../context/DarkContext';

export default function Footer() {
  const { isDark, setIsDark } = useContext(DarkContext);  // useContext로 상태관리
  const toggleTheme = () => {
    setIsDark(!isDark);
  };

  return (
    <footer
      className="footer"
      style={{ backgroundColor: isDark ? 'black' : 'lightgray' }}
    >
      <button
        className="button"
        onClick={toggleTheme}
      >
        Dark Mode
      </button>
    </footer>
  );
}

관련 data를 쓸 파일에서 useContext를 통해 사용하면 된다.
그러나 context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있으므로 꼭 Context는 필요할 때만 사용해야 한다.
prop drilling을 피하기 위한 목적이라면 component composition을 활용하는 방법이 더 효율적이라고 한다.

 

---

그럼 왜 redux나 recoil과 같은 상태관리 라이브러리가 있는 것일까?
그냥 useContext를 쓰면 될텐데..

What difference between React useContext and redux?

What difference between React useContext and redux?

 

영어 문서라 스트레스 받지만 결론은 다음과 같다.

 

redux, recoil모두 useContext를 기반으로 한 라이브러리라는 것을 일단 알아두고..

• useContext와 useReducer : 상대적으로 작은 애플리케이션에서는 충분할 수 있지만, 상태가 여러 컴퍼넌트에 걸쳐 복잡하게 얽히게 되면 관리가 어려워질 수 있다.
• Redux나 Recoil : 애플리케이션의 상태를 중앙 집중화하여, 복잡한 상태 변경을 보다 쉽게 추적하고 관리할 수 있도록 도와준다.