[ React ] useContext에 대해 알아보자.

참고사이트

• 리액트 공식 문서 - useContext

 

 

 

🌐 useContext

useContext는 컴포넌트의 Context를 읽고 구독하게 해주는 리액트 Hook이다.

 

리액트에서 데이터값을 하위 컴포넌트로 전달하기 위해 컴포넌트 호출 시, 데이터 prop을 담고, 해당 props를 이용하여 데이터를 사용한다.

useContext는 해당 과정에 상관없이 useContext로 감싼 컴포넌트들을 해당 데이터를 접근할 수 있도록 도와준다.

 

비슷한 기능의 외부 라이브러리로는 recoil이 있다.

 

📦 Parameter

useContext 컨텍스트를 읽고 구독하려면 컴포넌트 최상위에서 호출해야한다.

const value = useContext(SomeContext);

 

• SomeContext: 해당 컨텍스트는 createContext로 만들어진 데이터이다.

컨텍스트 자체는 정보를 보유하지 않으며 구성 요소에서 제공하거나 읽을 수 있는 정보의 종류만 나타낸다.

 

🎁 Return

useContext는 컴포넌트가 호출한 컨텍스트의 값을 반환한다.

값을 호출한 컴포넌트 위에 SomeContext.Provider와 가장 가까운 값을 전달한다.

그러나 createContext로 생성한 값이 없다면 defaultValue를 전달한다.

해당 반환은 항상 업데이트 되며, 리액트는 해당 값을 읽고 컴포넌트를 리-리렌더링한다.

 

⚠️ 주의사항

• useContext() 컴포넌트의 호출은 동일한 컴포넌트에서 반환된 컴포넌트의 영향을 받지 않는다.

즉, A - B - C 컴포넌트가 있다고 가정할 때, 모든 컴포넌트에서 useContext로 값을 사용하고 싶다면, A에서 선언하여 B,C에서 사용하는 것이 아닌 A 컴포넌트 상위에 Provider로 감싸서 A, B, C에서 사용하도록한다.

• 리액트는 다른 값을 받았을 때 이전 값과 다음 값을 비교하여 자동으로 하위 컴포넌트를 모두 리-렌더링한다.

 memo를 사용하여 리-렌더링을 건너뛰어도 하위 항목이 새로운 컨텍스트 값을 받는 것을 막을 수 없다.

• 빌드 시스템이 출력에 중복 모듈을 생성하는 경우(심링크에서 발생할 수 있음), 컨텍스트가 중단될 수 있다.

컨텍스트를 통해 데이터를 전달하는 것은 SomeContext를 제공하는데 사용하는 것과 SomeContext를 읽는데 사용하는 것이 동일한 오브젝트인 경우에만 작동한다.

 

✒️ 사용

Theme를 바꿔주는 간단한 컴포넌트를 만들어보자.

Provider를 생성하여 값을 제공할 컴포넌트를 생섷한다.

 

📄 ThemeProvider

import { createContext, useState } from "react";

const defaultValue = "Value is not exist";

// 값이 없을 때의 나타낼 내용을 파라미터로 전달 (생략 가능)
// 1. Context를 생성
export const ThemeContext = createContext(defaultValue);

// 2. Provider 컴포넌트에서 공유할 값을 선언
export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);

  return (
  // 3. createContext의 Provider를 통해 값 전달 후,
  // 하위 컴포넌트들을 사이에 {children}으로 삽입
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      {children}
    </ThemeContext.Provider>
  );
}

 

📄 App.tsx

import { ThemeProvider } from "./ThemeProvider";
import { ThemeToggle } from "./ThemeToggle";

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

export default App;

 

작성한 Provider 컴포넌트 호출 후, 하위 컴포넌트 삽입.

 

📄 ThemeToggle.tsx

import { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

export function ThemeToggle() {
  const { isDark, setIsDark } = useContext(ThemeContext);

  const handleChangeTheme = () => {
    setIsDark(!isDark);
  };
  return (
    <div>
      <button
        onClick={handleChangeTheme}
        style={{
          backgroundColor: isDark ? "black" : "white",
          color: isDark ? "white" : "black",
        }}
      >
        {isDark ? "라이트" : "다크"}
      </button>
    </div>
  );
}

 

다크모드일 때, 배경은 검정 / 글씨는 흰색

라이트모드일 때, 배경은 흰색 / 글씨는 검정

 

해당 글자는 해당 모드로 변경한다는 의미로 다크일땐 라이트 / 라이트일 땐 다크가 표시되는 것으로 작성함.