[React] 21. TODO LIST 앱 / 기능 구현 준비

서회정

Mar 04, 2026

Contents

1. 필요한 기능 정리 2. State

1. 필요한 기능 정리

우리가 만들고있는 투두리스트는 크게 네 가지 기능이 구현되어야한다.

TODO 추가 (Create)

TODO 리스트 렌더링 (Read)

TODO 수정 (Update)

TODO 삭제 (Delete)

헷갈릴 수 있으니 더 설명하자면 TODO 수정은,

현재 우리 프로젝트에서는 내용을 수정하는 것이 아니다.

체크박스를 클릭했을 때 해당하는 TODO 아이템이

완료됨/완료되지않음을 표시하는 어떠한 값을 부여해서

이를 체크박스를 클릭하여 수정할 수 있도록 하는 것이다.

2. State

앞서 설명한 네 가지 기능을 구현하기 위해서는

TODO의 상태를 관리해야한다.

따라서 우리는 state가 필요한데, 상태 변화가 이루어지는

모든 컴포넌트의 공통 부모 컴포넌트에서 상태 관리를 해야하기 때문에

App 컴포넌트에서 훅을 추가하고 새로운 스테이트를 만들어주자.

우리가 스테이트로 관리할 정보는 하나의 투두가 아닌 여러 개의 투두이다.

따라서 스테이트의 초기값은 빈 배열로 세팅해주자.


import "./App.css";
import { useState } from "react";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";
import React from "react";

function App() {
  const [todos, setTodos] = useState([]);

  return (
    <div className="App">
      <Header />
      <Editor />
      <List />
    </div>
  );
}

export default App;

데이터의 형태를 미리 알아보기 위해 mockData를 만들어보자.

todo를 하나의 객체로 만들어 여러 값을 관리할 예정이다.

우선 여러 todo를 관리해야하니 고유값인 id를 만들어주자.

그리고 체크박스로 상태를 관리할 isComplete

todo의 내용인 content, 작성한 날짜인 date를 Data객체로 만들어주자.

세 개정도 만들어서 각각 id 값을 겹치지 않게 바꾸고 내용도 바꾸어주자.


const mockData = [
  {
    id: 0,
    isComplete: false,
    content: "React 공부하기",
    date: new Date().getTime(),
  },
  {
    id: 1,
    isComplete: false,
    content: "빨래하기기",
    date: new Date().getTime(),
  },
  {
    id: 2,
    isComplete: false,
    content: "노래 연습하기",
    date: new Date().getTime(),
  },
];

이렇게 만들어진 mockData는 App컴포넌트가 리랜더링될 때 마다

초기화되지 않고 변경될 일이 없는 상수이기 때문에 App 컴포넌트

바깥에 있어도 문제되지 않는다.

일단 위로 빼두고 리액트 개발자 도구를 통해 App 컴포넌트가

해당하는 스테이트를 잘 가지고 있는지 확인해보자.

여기까지 되었으면 기능 개발 구현 준비는 완료다.