15.4.1 useContext Hook 사용하기

    리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있습니다. ColorBox 컴포넌트의 코드를 다음과 같이 수정해 보세요.

    components/ColorBox.js

    import React, { useContext } from 'react';
    import ColorContext from '../contexts/color';
     
    const ColorBox = () => {
      const { state } = useContext(ColorContext);
      return (
        <>
          <div
            style={{
              width: '64px',
              height: '64px',
              background: state.color
            }}
          />
          <div
            style={{
              width: '32px',
              height: '32px',
              background: state.subcolor
            }}
          />
        </>
      );
    };
     
    export default ColorBox;

     

    이전보다 훨씬 간결해졌지요? 만약 children에 함수를 전달하는 Render Props 패턴이 불편하다면, useContext Hook을 사용하여 훨씬 편하게 Context 값을 조회할 수 있습니다.

    그러나 Hook은 함수형 컴포넌트에서만 사용할 수 있다는 점에 주의하세요. 클래스형 컴포넌트에서는 Hook을 사용할 수 없습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.