더북(TheBook)

10.2.3 TodoInput 컴포넌트 생성

 

이번에는 일정을 입력할 수 있는 TodoInput 컴포넌트를 만들어 봅시다.

src/components/TodoInput/TodoInput.js

import React from ‘react’;
import styles from ‘./TodoInput.scss’;
import classNames from ‘classnames/bind’;
 
const cx = classNames.bind(styles);
 
// input 버튼이 함께 있는 컴포넌트입니다. 
/* value: input 
   onChange: input 변경 이벤트
   onInsert: 추가 버튼 클릭 이벤트
*/
const TodoInput = ({value, onChange, onInsert}) => {
  
  // Enter 키가 눌리면 onInsert 실행합니다.
  const handleKeyPress = (e) => {
    if(e.key === ‘Enter’) {
      onInsert();
    }
  }
 
  return (
    <div className={cx(‘todo-input’)}>
      <input onChange={onChange} value={value} onKeyPress={handleKeyPress}/>
      <div className={cx(‘add-button’)} onClick={onInsert}>추가</div>
    </div>
  );
};
 
export default TodoInput;

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