React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다.
즉 React는 return에서 user.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다.
원래 1. 렌더링하고 2. useEffect 가 실행되고 데이터를 가져오고 3. 가져온 데이터를 이용해서 다시 렌더링한다.
따라서 현재 1번에서 현재 에러가 난 상태이다.
해결방법
1. &&을 이용한다.
true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다.
따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다.
<TagUl>
{products.tags && products.tags.map((tag, i) => (
<TagLi key={i}>
<span>{tag}</span>
</TagLi>
))}
</TagUl>
2. ?. (옵셔널 체이닝)을 이용한다.
?.는 products.tags가 있을 때만 뒤에 로직을 수행한다는 의미이다.
<TagUl>
{products.tags?.map((tag, i) => (
<TagLi key={i}>
<span>{tag}</span>
</TagLi>
))}
</TagUl>
