To-do list 강의 세션에서 궁금한게 있습니다.

Question

선생님 궁금한 게 있어서 글을 남겨봅니다 오늘 To-do list 강의 세션을 완강했는데 이해를 하지 못하는 부분이 있었습니다

const onUpdate = (targetId) => { setTodo( todo.map((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it ) ); };

onUpdate 부분을 만들때 todo.map((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it 이분에서 ...it : !it.isDone 이 무엇을 의미하는지와 스프레드 연산자를 쓴 이유를 이해하기 어려웠습니다

const onDelete = (targetId) => { setTodo(todo.filter((it) => it.id !== targetId)); }; 에서 todo.filter((it) => it.id !== targetId) 가 삭제를 하기위해 만들어졌는데 .filter((it) => it.id !== targetId
filter 를 쓴 이유와 it.id !== targetId 가 뭔지를 아직도 잘모르겠습니다

to-do list 를 배열을 이용하여 상태 관리를 하는것으로 만들었는데 천천히 공부 해보면서 적용 해볼려고 합니다 공부할떄 선생님께서 보는 학습자료나 to-do list 를 만들때 특별히 참고한게 있었는지 궁금합니다

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

엇 .. 향후 질문부터는 코드 블럭을 이용해주시면 감사하겠습니다. 어떤 코드인지 알아보기가 조금 힘드네요 ㅠㅠ

TodoList 프로젝트의 결과 코드라고 생각하고 답변드리겠습니다.

먼저 다음은 onUpdate 함수 부분입니다.

  const onUpdate = (targetId) => {
    // todos State의 값들 중에
    // targetId와 일치하는 id를 갖는 투두 아이템의 isDone 변경

    // 인수: todos 배열에서 targetId와 일치하는 id를 갖는 요소의 데이터만 딱 바꾼 새로운 배열
    setTodos(
      todos.map((todo) =>
        todo.id === targetId
          ? { ...todo, isDone: !todo.isDone }
          : todo
      )
    );
  };

setTodos 함수를 호출하고 인수로 변경할 상태 값(업데이트가 반영된 투두리스트 데이터)를 넘겨주는것이 이 코드의 목적입니다. 이때 인수를 다음과 같이 넘겨주고 있는데요

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

위 코드를 자세히 설명드리자면 다음과 같습니다.

map 메서드를 호출하여 기존 todos 배열을 변환하고 있음
삼항 연산자를 이용해 현재 매개변수로 제공된 targetId와 아이템의 아이디(todo.id)가 일치하는 요소를 찾음
- 일치하는 요소일 경우 : { ...todo, isDone: !todo.isDone } 으로 해당 요소의 값을 대체함
  - 위 코드의 의미는 먼저 ...todo로 현재 요소의 프로퍼티를 전부 나열하여 기존 요소와 동일한 값을 갖도록 설정한다음, isDone: !todo.isDone 으로 isDone의 값만 토글함
  - 즉 결론적으로 해당 객체 요소에서 isDone의 값만 딱 바꾸고 나머지 값은 그대로 유지하기 위해 이렇게 하는 것임
- 일치하지 않는 요소일 경우 : 기존 요소를 그대로 사용함

다음은 onDelete 함수입니다.

  const onDelete = (targetId) => {
    // 인수: todos 배열에서 targetId와 일치하는 id를 갖는 요소만 삭제한 새로운 배열
    setTodos(todos.filter((todo) => todo.id !== targetId));
  };

onDelete 함수의 목적은 매개변수로 제공된 targetId와 일치하는 id를 갖는 요소를 todos 배열에서 제거하는 것 입니다.
그러므로 setTodos 함수를 호출하고 인수로 targetId와 일치하는 id를 갖는 요소가 제거된 배열을 넘겨줘야 합니다.
이런 배열을 만들기 위해 filter 메서드를 이용해 targetId와 일치하는 id를 갖는 요소만 걸러냅니다. 이때 filter 메서드는 배열의 모든 요소를 순회하면서, 콜백함수가 true를 반환하는 요소들만 모아 새로운 배열로 필터링 해 주기 때문에 위와 같이 사용하고 있는 것 입니다.

혹시 어려운 포인트가 있다면 답글로 다시 알려주세요

만약 map 메서드와 filter 메서드의 문법 자체가 어렵게 느껴지신다면 이는 리액트의 기능이 아닌 자바스크립트의 기본 기능이므로 앞선 자바스크립트 챕터를 다시 복습하시는걸 추천드립니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 전수빈님.

To-Do 리스트 강의에서 질문 주신 부분에 대해 상세하게 설명드리겠습니다.

`onUpdate` 함수

const onUpdate = (targetId) => {
  setTodo(
    todo.map((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it)
  );
};

스프레드 연산자 (`...`)

...it: 이는 JavaScript의 스프레드 연산자로, 객체 it의 모든 프로퍼티를 새 객체에 복사하는 역할을 합니다. 이로 인해 객체를 복제하며 일부 프로퍼티를 쉽게 업데이트할 수 있습니다.
isDone: !it.isDone: it.isDone의 값을 반전시킵니다. 체크박스의 상태를 변경하려는 의도로 사용됩니다. 즉, 체크되어 있지 않으면 체크되게 하고, 체크되어 있으면 체크 해제되게 만드는 로직입니다.

`onDelete` 함수

const onDelete = (targetId) => {
  setTodo(todo.filter((it) => it.id !== targetId));
};

`filter`

.filter((it) => it.id !== targetId): filter 메소드는 배열을 순회하며, 콜백 함수의 조건에 따라 참일 경우 해당 요소를 유지하고, 거짓일 경우 요소를 제거합니다. 여기서는 it.id !== targetId 인지 확인해서, targetId와 일치하지 않는 아이템만 남깁니다. 이로 인해 선택한 요소가 배열에서 제외되는 효과, 즉 삭제가 됩니다.

학습 자료

To-Do 리스트를 구현할 때는 여러 리액트의 공식 문서, JavaScript 배열 메소드(특히 map, filter, reduce 등)에 대한 이해가 중요합니다. 추가로 참고하실 수 있는 리소스로는 리액트 깃헙 리포지토리, CodeSandbox와 같은 실습 환경이 있습니다.

이 외에도, React 공식 문서 및 다양한 커뮤니티의 예제를 참고하시면 공부에 많은 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변