useEffect 훅에서 else 유무에 따른 결과

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

유저 Follow 리액트 화면 구현

해결된 질문

작성

안녕하세요.

다음 코드에서

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가 없어도 동일한 로직이라고 하는데 이유를 모르겠습니다.

react python django docker

답변 1

이진석

지식공유자

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 })));

살펴보시고 댓글 남겨주세요.

화이팅입니다. :-)

코해

질문자

답변 감사합니다! userList와 orgUserList를 동일시하다 보니 생긴 착오였습니다.

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

useEffect 훅에서 else 유무에 따른 결과