해결된 질문
작성
·
27
0
안녕하세요 return에 대해 질문이 있습니다.
const sum = (a, b) => {
return a + b
}
const result = sum(1, 2);
console.log(result)
이렇게 간단한 코드에서는 a와 b가 더한 값이 반환되어 호출한 부분으로 전달되서 5가된다라고는 알고 있는데 투두리스트 예제에서 예를 들어
const onUpdate = (targetId) => {
setTodos(
todos.map((todo) => {
if (todo.id === targetId) {
return {
...todo,
isDone: !todo.isDone,
};
}
return todo;
})
);
};
이렇게 return {...todo, isDone: !todo.isDone} 부분과 return todo 이 부분이 조금 이해가 되지 않는데 이 부분은 return을 왜 사용하였고 또 어디로 반환이 되는것인지 궁금합니다.
답변 2
0
안녕하세요 이정환입니다.
todos.map 메서드의 콜백 함수 내부에서 두번의 return이 발생하는 이유는 조건식에 따라 반환값이 달라지기 때문에 그렇습니다.
코드를 천천히 살펴보시면 먼저 map의 콜백함수 내부에서는 if(todo.id === targetId) 조건식으로 현재 순회중인 배열 요소의 id가 targetId와 일치하는지 확인합니다.
이 조건식이 참일 경우 현재 순회중인 요소는 업데이트가 필요한 요소입니다. 즉 우리가 화면에서 체크박스를 클릭한 그 아이템이라는 거죠 따라서 이 아이템의 완료 상태(체크 표시)를 토글해야 합니다.
이때 특정 아이템의 완료 유무(체크 표시)는 isDone 이라는 프로퍼티로 관리되고 있으므로 { ...todo, isDone: !todo.isDone } 으로 isDone의 값만 토글된 값으로 딱 바꿔주는 것 입니다.
반대로 조건식이 거짓일 경우, 현재 순회중인 요소는 수정 대상 아이템이 아닙니다. 따라서 아이템의 어떠한 변화도 일어나서는 안되겠죠 그러므로 return todo로 현재 아이템을 그대로 반환하는 것 입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.
React 코드와 관련된 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
를 통해 상태가 업데이트되는 것입니다.
이와 관련하여 추가적인 설명이 필요하시면, 이번 강의의 관련 질문도 참고해 보시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.