[React] 24. TODO LIST 앱 / Update - 투두 수정

서회정

Mar 06, 2026

[React] 24. TODO LIST 앱 / Update - 투두 수정

Contents

1. App 컴포넌트에서 투두 상태 변경 함수 작성 2. 상태 변경 함수를 하위 컴포넌트로 전달 3. TodoItem에서 체크박스 이벤트로 상태 변경 실행

이번 단계에서는 투두의 체크박스 조작으로

isComplete 상태를 수정할 수 있는 기능을 만들어보자.

1. App 컴포넌트에서 투두 상태 변경 함수 작성

💡

먼저, 체크 박스를 통해 상태를 수정하는 작업은 현재 프로젝트에서 다음과 같은 로직이 필요하다.

todos(리스트) State의 값들 중에 targetId와 일치하는 id를 갖는 투두 아이템의 isComplete를 변경해야 한다.

따라서 App컴포넌트에서 수정하는 동작인 onUpdate함수를 만들고

그 안에서 이미 만들어져 있는 setTodos상태 변경 함수를 호출한다.

그리고 setTodos함수의 인수로는 todos 배열에서 targetId와

일치하는 id를 갖는 요소의 데이터만 바꾼 새로운 배열이 들어가야 한다.


const onUpdate = (targetId) => {
  setTodos(
    todos.map((todo) => {
      if (todo.id === targetId) {
        return {
          ...todo,
          isComplete: !todo.isComplete,
        };
      }
      return todos;
    })
  );
};

길게 작성된 조건문 대신 삼항연산자로 더 간결하게 코드를 완성할 수 있다.


const onUpdate = (targetId) => {
    setTodos(
      todos.map((todo) =>
        todo.id === targetId ? { ...todo, isComplete: !todo.isComplete } : todo,
      ),
    );
  };

2. 상태 변경 함수를 하위 컴포넌트로 전달

이렇게 만들어진 onUpdate함수는 props로 List컴포넌트에 내려줄 수 있다.


<List todos={todos} onUpdate={onUpdate} />

그리고 List컴포넌트에서는 부모로부터 props로 전달된

onUpdate를 구조분해할당 문법으로 받아

마찬가지로 TodoItem컴포넌트에 props로 전달해주자.

3. TodoItem에서 체크박스 이벤트로 상태 변경 실행

마지막으로 TodoItem에서 props로 onUpdate함수를 받아

이를 실행시켜줄 onChange함수를 만들어 그 안에서 호출해주자.

이때 사용자가 값을 변경할 컴포넌트의 id값이 전달되어야

클릭한 체크박스가 있는 투두의 정보가 변경되기 때문에

반드시 인수로 id를 전달해줘야한다.


const onChange = () => {
    onUpdate(id);
  };

input태그에 임시로 넣었던 readOnly 속성을 제거하고

onChange속성에 만들어둔 onChange함수를 넣어주자.


<input onChange={onChange} checked={isComplete} type="checkbox" />

체크 토글로 isComplete 상태 변경이 원활하게 된다!