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

Question

안녕하세요. 다음 코드에서 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가 없어도 동일한 로직이라고 하는데 이유를 모르겠습니다.

pyhub · Answer

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 }))); 살펴보시고 댓글 남겨주세요. 화이팅입니다. :-)