[react] JSX에서 useContext 훅 사용하기

26 Dec 2023

react

React 애플리케이션에서 Context API를 사용하는 것은 매우 흔한 일입니다. Context API를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. useContext 훅은 Context API를 훨씬 더 쉽게 사용할 수 있도록 도와줍니다.

이 포스트에서는 JSX에서 useContext 훅을 사용하는 방법에 대해 살펴보겠습니다.

1. Context 생성하기

우선, Context를 생성해야 합니다. 여기서 createContext 함수를 사용하여 새로운 Context 객체를 만듭니다.

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

2. Provider 제공하기

이후, 해당 Context의 값을 제공하는 Provider를 만들어야 합니다.

import React from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  return (
    <MyContext.Provider value={'Hello from Context'}>
      {/* 자식 컴포넌트 */}
    </MyContext.Provider>
  );
};

export default MyComponent;

3. useContext 훅 사용하기

이제, useContext 훅을 사용하여 해당 Context의 값을 소비(consume)할 수 있습니다.

import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyChildComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

export default MyChildComponent;

결론

useContext 훅을 사용하면 Context API를 훨씬 더 간편하게 활용할 수 있습니다. 이를 통해 컴포넌트 간의 데이터 전달이 훨씬 더 용이해집니다.

참고 자료: React 공식 문서 - useContext