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

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

todos.map 메서드의 콜백 함수 내부에서 두번의 return이 발생하는 이유는 조건식에 따라 반환값이 달라지기 때문에 그렇습니다.

코드를 천천히 살펴보시면 먼저 map의 콜백함수 내부에서는 if(todo.id === targetId) 조건식으로 현재 순회중인 배열 요소의 id가 targetId와 일치하는지 확인합니다.

이 조건식이 참일 경우 현재 순회중인 요소는 업데이트가 필요한 요소입니다. 즉 우리가 화면에서 체크박스를 클릭한 그 아이템이라는 거죠 따라서 이 아이템의 완료 상태(체크 표시)를 토글해야 합니다.

이때 특정 아이템의 완료 유무(체크 표시)는 isDone 이라는 프로퍼티로 관리되고 있으므로 { ...todo, isDone: !todo.isDone } 으로 isDone의 값만 토글된 값으로 딱 바꿔주는 것 입니다.

반대로 조건식이 거짓일 경우, 현재 순회중인 요소는 수정 대상 아이템이 아닙니다. 따라서 아이템의 어떠한 변화도 일어나서는 안되겠죠 그러므로 return todo로 현재 아이템을 그대로 반환하는 것 입니다.

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.

React 코드와 관련된 return의 사용 방법에 대해 설명드리겠습니다.

map 함수에서의 return

map 함수는 배열의 각 요소를 변환하며 새로운 배열을 만듭니다. map에 전달된 함수는 배열의 각 요소에 대해 호출되고, 그 결과를 모아 새로운 배열을 만드는데 사용됩니다.

예제 코드의 경우, todos 배열의 각 todo 객체를 순회하면서 targetId와 일치하는 todo의 isDone 상태를 반전시킨 새로운 객체를 반환합니다. 그렇지 않은 요소는 그대로 반환, 즉 기존의 todo 객체를 그대로 반환합니다.

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

• return {...todo, isDone: !todo.isDone}: targetId와 일치하는 경우, 새로운 객체를 만들어서 isDone 속성만 수정한 후 반환합니다. 이 반환값이 결국 map에 의해 새로운 배열의 요소가 됩니다.
  
• return todo: targetId와 일치하지 않으면 기존 todo를 그대로 반환하여 배열 내의 다른 요소는 변함없이 유지합니다.
  

이러한 반환 결과로 map 함수는 모든 요소에서 특정 변화가 반영된 새로운 배열을 만들어 주고, setTodos를 통해 상태가 업데이트되는 것입니다.

이와 관련하여 추가적인 설명이 필요하시면, 이번 강의의 관련 질문도 참고해 보시기 바랍니다.

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