1-4. Counter 컴포넌트 만들기

우리의 첫 프리젠테이셔널 컴포넌트인 카운터 컴포넌트를 만들어보겠습니다.

이 컴포넌트는 숫자, 색상값과, 더하기, 빼기, 그리고 색상변경 함수 3개를 props 로 전달받는 컴포넌트입니다.

src/components/Counter.js

import React from 'react';
import PropTypes from 'prop-types';
import './Counter.css';

const Counter = ({number, color, onIncrement, onDecrement, onSetColor}) => {
    return (
        <div 
            className="Counter" 
            onClick={onIncrement} 
            onContextMenu={
                (e) => { 
                    e.preventDefault(); 
                    onDecrement();
                }
            } 
            onDoubleClick={onSetColor}
            style={{backgroundColor: color}}>
                {number}
        </div>
    );
};

Counter.propTypes = {
    number: PropTypes.number,
    color: PropTypes.string,
    onIncrement: PropTypes.func,
    onDecrement: PropTypes.func,
    onSetColor: PropTypes.func
};

Counter.defaultProps = {
    number: 0,
    color: 'black',
    onIncrement: () => console.warn('onIncrement not defined'),
    onDecrement: () => console.warn('onDecrement not defined'),
    onSetColor: () => console.warn('onSetColor not defined')
};

export default Counter;

여기서 onContextMenu 는 우클릭을 하여 메뉴가 열리는 이벤트를 의미하는데요. 이 함수가 실행될때, e.preventDefault() 를 실행하면 메뉴가 열리지 않게 됩니다.

카운터의 기본 숫자는 0, 기본색상은 검정색으로 설정하였습니다.

그럼 이제 스타일을 정의해볼까요?

아무리 예제 프로젝트이지만, 눈이 좀 즐거워야 지루하지 않으니까요!

src/components/Counter.css

.Counter {
    /* 레이아웃 */
    width: 10rem;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;

     /* 색상 */
    color: white;

    /* 폰트 */
    font-size: 3rem;

    /* 기타 */
    border-radius: 100%;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.75s;
}

컴포넌트를 동그라미 모양으로, 숫자는 가운데에 위치 시키고 흰색으로 설정하였습니다.

이 컴포넌트가 어떻게 보여지는지 확인하기 위하여, App.js 에서 임시로 불러와서 렌더링해보세요. 그리고, 왼쪽클릭, 오른쪽클릭, 더블클릭을 해서 우리가 각 이벤트에 지정한 기본 함수가 제대로 실행 되는지 확인하세요.

잘 되었다면 성공! 다음으로 넘어가세요.