15.3.3 색상 선택 컴포넌트 만들기

    이번에는 Context의 actions에 넣어 준 함수를 호출하는 컴포넌트를 만들어 보겠습니다. components 디렉터리에 SelectColors.js라는 파일을 생성하여 다음 코드를 작성해 보세요. 지금은 Consumer를 사용하지 않고 UI만 준비해 봅시다.

    components/SelectColors.js

    import React from 'react';
     
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
     
    const SelectColors = () => {
      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;

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