> For the complete documentation index, see [llms.txt](https://simplereact.gitbook.io/simplereact/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplereact.gitbook.io/simplereact/10.-todo-app-update-status.md).

# 10. TODO APP (UPDATE - STATUS)

Todo APP 을 만들어봅니다

### 들어가기전

이번 챕터에서는 isDone 이라고 불리는 Todo 의 완료여부를 나타내는 값을 업데이트 해보겠습니다.

### 실습  

따로 스타일이 없기 때문에 isDone 이 true 인 경우 text 옆 쪽에 (완료) 라는 문구를 추가해보겠습니다.\
이 또한 추가, 삭제와 비슷한 패턴입니다. \
event 는 Contents 에서 일어나고 실제 데이터를 변화시키는 곳은 App.js 입니다.

먼저 App.js 의 함수를 추가해보겠습니다.

```javascript
import React, { useState } from "react";

import Header from "./components/header";
import Contents from "./components/contents";
import Footer from "./components/footer";

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

  const handleAdd = text => {
    setTodos([
      ...todos,
      {
        id: Date.now(),
        text,
        isDone: false
      }
    ]);
  };

  const handleDelete = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const handleUpdateStatus = id => { // isDone 을 업데이트 하는 함수를 추가합니다.
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };

  return (
    <div>
      <Header onChange={handleAdd} />
      <Contents
        todos={todos}
        onDelete={handleDelete}
        onUpdateStatus={handleUpdateStatus}
      />
      <Footer />
    </div>
  );
}

export default App;
```

handleUpdateStatus 함수의 문법이 익숙하지 않을 수도 있기 때문에 한번 살펴보고 넘어가겠습니다.

map => 기존 배열을 통해 새로운 배열을 만들어내는 함수 \
id 비교 => 넘겨 받은 id 와 기존 todo list 에 있는 id 와 비교합니다.\
id 가 같다면 => { ...todo } 를 이용하여 기존 객체를 복사합니다. 그리고 { ...todo, isDone: !todo.isDone } 을 이용하여 기존 객체의 isDone 을 한번 뒤집어 토글해준 값으로 덮어씌웁니다.\
id 가 다르다면 => 아무런 변화도 주지 않습니다.

```javascript
todos.map(todo =>
  todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
)
```

####

#### update isDone

이제 Contents 에서 넘겨받은 함수를 이용하여 상태를 업데이트 해보겠습니다.\
isDone 에 따른 문구 추가와 checkbox 에 onChange 함수를 추가해야합니다.

```javascript
// src/components/contents.js

import React from "react";

function Todo({ todo: { id, text, isDone }, onDelete, onUpdateStatus }) {
  return (
    <div>
      <input
        type="checkbox"
        onChange={() => onUpdateStatus(id)}
        checked={isDone}
      />
      <span>
        {text} {isDone ? "(완료)" : "(진행중)"}
      </span>
      <button onClick={() => onDelete(id)}>DELETE</button>
    </div>
  );
}

function Contents({ todos, onDelete, onUpdateStatus }) {
  return (
    <div>
      {todos.map(todo => (
        <Todo
          todo={todo}
          onDelete={onDelete}
          onUpdateStatus={onUpdateStatus}
          key={todo.id}
        />
      ))}
    </div>
  );
}

export default Contents;
```

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-Loo1yJXtpwbebR-Iuwi%2F-Loo4zdgqBE-lax0z0p7%2FKapture%202019-09-15%20at%2017.43.29.gif?alt=media\&token=7d4c1dac-d2e3-4355-b3c0-408e44c46f33)