15.4.2 static contextType 사용하기

    클래스형 컴포넌트에서 Context를 좀 더 쉽게 사용하고 싶다면 static contextType을 정의하는 방법이 있습니다. SelectColors 컴포넌트를 다음과 같이 클래스형으로 변환해 보세요. 그리고 Consumer 쪽 코드는 일단 제거해 주세요.

    components/SelectColors.js

    import React, { Component } from 'react';
     
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
     
    class SelectColors extends Component {
      render() {
        return (
          <div>
            <h2>색상을 선택하세요.</h2>
            <div style={{ display: 'flex' }}>
              {colors.map(color => (
                <div
                  key={color}
                  style={{
                    background: color,
                    width: '24px',
                    height: '24px',
                    cursor: 'pointer'
                  }}
                />
              ))}
            </div>
            <hr />
          </div>
        );
      }
    }
     
    export default SelectColors;

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