to do list 만들기_3 (Form 컴포넌트 만들기)

Form 컴포넌트 만들기

컴포넌트 구현 흐름

 

components 디렉토리에 다음 파일들을 생성

src/components/Form.js

src/components/Form.css

 

 

src/components/Form.js

import React from 'react';
import './Form.css';

const Form = ({value, onChange, onCreate, onKeyPress}) => {
  return (
    <div className="form">
      <input value={value} onChange={onChange} onKeyPress={onKeyPress}/>
      <div className="create-button" onClick={onCreate}>
        추가
      </div>
    </div>
  );
};

export default Form;

이 컴포넌트는 총 4가지의 props 를 받아옴

 

✔ value : 인풋의 내용

✔ onCreate : 버튼이 클릭 될 때 실행 될 함수

✔ onChange : 인풋 내용이 변경 될 때 실행되는 함수

✔ onKeyPress : 인풋에서 키를 입력 할 때 실행되는 함수. 이 함수는 나중에 Enter 가 눌렸을 때 onCreate 를 한 것과 동일한 작업을 하기 위해서 사용함

 

 

src/components/Form.css

.form {
  display: flex;
}

.form input {
  flex: 1; /* 버튼을 뺀 빈 공간을 모두 채워줍니다 */
  font-size: 1.25rem;
  outline: none;
  border: none;
  border-bottom: 1px solid #c5f6fa;
}

.create-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: 1rem;
  background: #22b8cf;
  border-radius: 3px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.create-button:hover {
  background: #3bc9db;
}

 

 

src/App.js

import React, { Component } from 'react';
import TodoListTemplate from './components/ToDoListTemplate';
import Form from './components/Form';

class App extends Component {
  render() {
    return (
      <TodoListTemplate form={<Form/>}>
        템플릿 완성
      </TodoListTemplate>
    );
  }
}

export default App;

 

---

 

참고 자료 👇

 

velopert.com/3480