프론트와 백을 통합한 후 문제 발생시 프론트에 있는지 백에 있는지 확인이 어려움

→ HTML Mock를 우선적으로 작성 후 UI에 들어가게 될 데이터를 작성

Todo List

App 컴포넌트의 render 함수에 Todo 컴포넌트 추가

import React from "react";
// 간단한 checkbox와 label 렌더링함

const Todo = ()=>{
    return (
        <div className = "Todo">
            <input type="checkbox" id = "todo0" value= "todo0"></input>
            <label for= "todo0"> Todo 컴포넌트 만들기 </label>
        </div>
    );
};

export default Todo;

import logo from './logo.svg';
import './App.css';
import Todo from './Todo';
function App() {
  return (
    <div className='App'>
      <Todo/>
    </div>
  );
}

export default App;

App.js에서 Todo컴포넌트 사용하도록 수정

잘 뜨는 모습 확인 가능

Props와 useState Hook

API에서 받아온 임의의 TodoList를 추가할 수 있어야 함

매개변수로 넘길 필요 있음…

useState 컴포넌트의 state를 간편하게 생성하고 업데이트할 수 있는 도구 제공해줌