[TIL] 241205_React: createContext와 useContext

⚡️ createContext() 복기하기

요즘은 Context에 대하여 꾸준히 공부하고, 적용해보는 중이다. 11월 말에 Context 개념에 대해 구체적으로 알아보고, 자바스크립트로 직접 구현하며 파헤쳐보았다.
🔗 참고: [TIL] 241120_React: Context에 대하여

위 글에서는 Context를 만드는 createContext 함수에 대해서만 언급하였다. 이 글에서는 useContext 함수에 대해 주로 다루려고 하기 때문에 createContext 함수에 대해서는 사용법만 간단히 언급하도록 하겠다.

Example

import React from "react";

export const CounterContext = React.createContext({});

React를 불러와서 React.createContext()와 같은 방식으로 사용하거나, 함수만 개별적으로 불러와서 createContext()와 같이 사용할 수 있다.

위와 같이 Context를 생성하면, Context 객체 내부에 🔗 참고 포스팅에서 구현하며 공부했던 Provider와 Consumer가 있기 때문에, 불러와서 바로 사용할 수 있다.

createContext의 인자는 Context의 initialvalue이다. 설정하지 않고 싶을 경우 괄호를 비워두거나 null을 입력하면 된다.

import React from "react";

export default function App() {
  const value = {
  	count,
    changeCount
  };
  
  return (
    <CounterContext.Provider value={value}>
      {...}
    </CounterContext.Provider>  
  );
}

예시 코드를 작성해보았다. 위에서 생성한 CounterContext의 Provider를 이용하여 value를 전달해주면, children으로 들어오는 모든 컴포넌트들에게 해당 value를 전달할 수 있다. depth가 얼마인지에 상관 없이 말이다.

⚡️ useContext()는?

그럼 useContext는 언제, 어떻게 사용하면 될까?
함수명을 보면 알 수 있듯, 이 함수는 이미 만들어진 Context를 사용하는 함수이다. 예시 코드를 살펴보자.

import React from "react";

export const function Counter() {
  const { count, changeCount } = React.useContext(CounterContext);

  // ... 이하 생략
}

위에서 만든 CounterContext를 useContext의 인자로 넣으면, 해당 Context가 갖고 있는 값을 useContext 함수를 사용하는 컴포넌트에서 바로 사용할 수 있다.

🔗 참고 포스팅 예시 코드에서 사용한 것과 같이

<CounterContext.Consumer>
  {...}
</CounterContext.Consumer>

이렇게 Consumer 컴포넌트를 사용하지 않아도, value를 사용할 수 있게 된다.

마무리하며

Context에 대해 꾸준히 공부하고 사용해보는 중인데, 알면 알수록 더 흥미로운 개념이라고 느껴진다. (처음엔 공부하기 무서웠음)
알게 된 만큼 개발에서 적정한 때에 잘 적용해봐야겠다.

Reference

👩🏻‍🏫 [리액트 2부] 고급 주제와 훅
https://www.inflearn.com/course/리액트-고급주제와-훅-2부

📄 React 공식 문서: Hooks API Reference-React
https://ko.legacy.reactjs.org/docs/hooks-reference.html#usecontext