useContext()

개요

const value = useContext(SomeContext)

useContext훅은 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 훅이다. prop-drilling없이 여러 컴포넌트에 걸쳐 데이터를 쉽게 전달하고 접근할 수 있다.

---

활용예제

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

// Context 생성
const MyContext = createContext();

function App() {
  return (
    // Provider를 사용하여 값을 공유
    <MyContext.Provider value="Hello World!">
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  // useContext를 사용하여 값에 접근
  const value = useContext(MyContext);
  return <div>{value}</div>; // "Hello World!" 출력
}

위 예제에서 App컴포넌트는 MyContext.Provider를 사용하여 Child컴포넌트에 'Hello World'라는 value를 전달한다.

Child컴포넌트에선 useContext를 사용하여 이 값을 받아와 사용을 할 수 있다.

즉, 전달해주고자하는 컴포넌트에 MyContext.Provider를 씌워 값을 전달해주어야 하며 그 값을 활용하는 컴포넌트에선 useContext를 활용하여 값을 사용할수 있다.

useContext는 상태관리가 필요한 다양한 데이터(사용자 인증 정보, 테마, 언어 설정 등)를 효율적으로 관리할 때 유용하게 사용된다.

---

적용점

주로 다크모드, 언어설정 등 전역적으로 적용되는 설정을 관리할 때 주로 쓰인다. 그리고 상태관리라 하니 recoil, redux도 생각나게 되는데 상태관리면에서 이들과 어떤 차이가 있는지, 어떻게 활용할 수 있는지 알아봐야겠다.

---

참조

• https://react-ko.dev/reference/react/useContext
  (FE재남과 [React 공식문서 스터디 그룹]의 비공식 한글 번역 사이트 'useContext')
• https://youtu.be/LwvXVEHS638?si=CblBUQGfJlSzeGmd
  (별코딩 'React Hooks에 취한다' 시리즈)