-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
useEffect 훅에서 else 유무에 따른 결과
24.01.30 17:14 작성 조회수 52
0
안녕하세요.
다음 코드에서
useEffect(() => {
if (!origUserList) setUserList([]);
else setUserList(origUserList.map(user => ({ ...user, is_follow: false })));
}, [origUserList]);else가 있어야 하는 이유가 return 하지 않을 것이기 때문이라고 05:55 에서 말씀하셨는데, 이 부분에 대해 이해가 가지 않습니다.
그냥 보기에는 else가 없어도 동일하게 작동할 것 같아서 else를 빼봤는데 아니나 다를까 다음과 같은 에러가 납니다.
SuggestionList.js:24 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
chatGPT에게 물어보니 else가 없어도 동일한 로직이라고 하는데 이유를 모르겠습니다.
답변을 작성해보세요.
0
이진석
지식공유자2024.01.30
origUserList 값이 undefined이거나 null인 상황에서는 => setUserList([]) 호출을 할 것이며
origUserList 값이 있을 때에는 => setUserList(origUserList.map(생략)) 호출을 할 것입니다.
origUserList 값이 undefined이거나 null인 상황에서는 setUserList(origUserList.map(생략)) 코드가 호출되어서는 안 됩니다. map 호출은 배열(array)에서만 지원할 뿐, undefined에서는 지원하지 않습니다. undefined 에 대해서 map 호출이 되면 말씀하신 아래 오류가 발생합니다.
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
아래와 같이 코드를 써볼 수도 있고
if (!origUserList) {
setUserList([]);
// return 문은 함수의 종료를 의미합니다. 아래 코드가 수행되지 않습니다.
return;
}
// origUserList 값이 undefined 상황에서는 호출되지 않습니다.
setUserList(origUserList.map(user => ({ ...user, is_follow: false })));혹은 강의처럼 else를 적용하셔도 origUserList값이 undefined 상황에서는 serUsetList.map(생략) 코드가 수행되지 않습니다.
if (!origUserList) {
setUserList([]);
}
else {
setUserList(origUserList.map(user => ({ ...user, is_follow: false })));
}만약 아래와 같이 쓰셨다면 말씀하신 TypeError 예외가 발생합니다.
if (!origUserList) {
setUserList([]);
}
// origUserList가 undefined인 상황에서 아래 코드가 수행되어 TypeError가 발생합니다.
setUserList(origUserList.map(user => ({ ...user, is_follow: false })));
살펴보시고 댓글 남겨주세요.
화이팅입니다. :-)
답변 1