React (4) - 함수형 컴포넌트

import logo from './logo.svg';
import './App.css';
import React from 'react';
import TodoList from './TodoList'
import { useState } from 'react';

// 1. 클래스형 컴포넌트
// 2. 함수형 컴포넌트
// 3. 외부 파일에 컴포넌트 선언

function TodoList2(props){
  const [todoList, setTodoList] = useState([
    '첫 번째 할일',
    '두 번째 할일',
    '세 번째 할일'
  ]);

  const [work, setWork] = useState("");

  return(<>
    <h3>{props.title}</h3>
    <div>
      <label>할 일 : </label>
      <input value={work} onChange={(e)=>{
        setWork(e.currentTarget.value)
      }} />
      <button onClick={(e)=>{
        setTodoList([...todoList, work])
      }}>저장</button>
    </div>
    <ol>
      {todoList.map((item, i)=>{
        return(<li key={i}>
          <span>{item}</span>
          <button>완료</button>
          <button>삭제</button>
        </li>
        )
      })}
    </ol>
  
  </>)
}

function App() {
  return (
    <div>
      <h1>Hello Work</h1>
      <TodoList2 title="할일 목록"/>
    </div>
  );
}

export default App;