[React] useContext 사용법 _(리액트 Hooks)

 

🧐 React Hooks의 useContext를 알아보자

 
props를 사용할 때 가끔 비효율적이라고 느낄 때가 있죠. 그럴 때 사용할 수 있는 것이 바로 context입니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useContext Hook에 대해 알아보고 사용해 볼게용
 
 
 

---

🍊 useContext란 무엇일까?

useContext란 리액트 hook의 하나로, 부모 컴포넌트에서 생성한 context를 읽고(read), 구독(subscribe)할 수 있게 하는 도구입니다.
 

🤷🏻‍♀️ context? 그게 뭔데요

context란 말이 와닿지 않을 수 있습니다. context를 직역하면 문맥, 배경, 상황이라는 뜻인데, props의 대안으로 나온 것이기 때문에 중간 컴포넌트를 거치지 않아도 되는 props라고 생각하시면 편합니다. 
 
 
예를 들어 prop을 사용한다면 아래와 같이 prop drilling이 발생하기 마련인데,

이러한 현상을 방지할 수 있는 것이 context인 것입니다.
 
context를 사용하면 아래 그림처럼 부모에서 원하는 컴포넌트에 바로 사용할 수 있습니다.

 
 

---

 

🍊 context 사용법

📌 context 생성하기

const MyContext = createContext(null);

context를 생성할 때는 createContext라는 함수를 사용합니다.
 
 

📌 context를 사용할 범위 설정하기

<MyContext.Provider value={some}> 
</MyContext.Provider>

context를 전달하고 싶은 스코프를 지정합니다. 상위레벨에서 < 생성한 컨텍스트명.Provider> 컴포넌트로 감싸주고 value로 context 값 some을 전달합니다. (여기서 some은 임의로 지정한 이름입니다.)
 
 

📌 context 사용하기

const some = useContext(MyContext);

자식 컴포넌트에서 context를 사용할 때는 useContext라는 함수를 사용합니다. 괄호 안에 인자로 생성한 context를 넣어주고 변수에 받아와서 사용합니다.
 
 
 

---

 

🍊 이제 직접 사용해보자

context를 이용해서 아래와 같은 form의 테마를 관리해볼게요. 테마가 dark인지 light인지 context로 관리하고 자식 컴포넌트에서도 적용해 보겠습니다.
 

 
 

🔗 createContext 함수를 사용해서 새 context 생성하기

const ThemeContext = createContext('light');

ThemeContext라고 하는 문자열 테마 설정을 담을 context를 생성합니다.
디폴트값은 light로 설정합니다.
 
 
🔗 컨텍스트명.Provider 컴포넌트로 사용할 곳을 지정하기

export default function MyApp() {
  const [theme, setTheme] = useState('light');
  return (
    <>
      <ThemeContext.Provider value={theme}> // value로 테마값 설정
        <Form />
      </ThemeContext.Provider>
      
      // 다크모드 라이트모드 전환하는 버튼
      <Button onClick={() => {
        setTheme(theme === 'dark' ? 'light' : 'dark');
      }}>
        Toggle theme
      </Button>
    </>
  )
}

 
 
🔗 useContext(사용할 context) 로 부모의 context 물려받기

function Form({ children }) {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) {
  const theme = useContext(ThemeContext); // useContext 부모 context 가져오기
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children, onClick }) {
  const theme = useContext(ThemeContext); // useContext 부모 context 가져오기
  const className = 'button-' + theme;
  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
}

 
🔗 결과

Toggle theme를 클릭하면 다크모드와 라이트모드를 토글 형식으로 바꿀 수 있습니다.
 
 

---

🍊 요약

useContext hook에 대해서 알아보았는데요! prop에 대한 이해가 없었다면 글을 읽는 데 어려움이 있을 수도 있습니다. 다음에는 prop에 대해서 포스팅하고 링크를 걸어둬야겠어요! 아무튼 context는 prop의 대안으로 나왔다는 것과 전역 변수를 관리하기에 좋은 점이라는 것만 기억하면 좋을 것 같아요! 
 
다음에는 또 다른 리액트 훅을 알아보겠습니다!
 
 
 
참고문서
 
https://react.dev/reference/react/useContext#usage

useContext – React

https://react.dev/learn/passing-data-deeply-with-context

Passing Data Deeply with Context – React