조건부렌더링(&&), optional chaning(?.)

react에서 undefined가 될 수 있는 변수를 map 돌릴때 undefined인경우 오류가 발생한다.
이는 조건부 렌더링 또는 optional chaining을 사용해서 undefined일때를 대비해야한다.
특히 DB에서 데이터를 받아와 뿌리는경우 필수로 사용해주는게 좋다

list.map((e, i) => { return(<li>{e}</li>)}) //undefind를 map돌린다는 에러 출력

list
?
list.map((e, i) => { return(<li>{e}</li>)})
:
return //정상적으로 빈화면 렌더링

list?.map((e, i) => { return(<li>{e}</li>)}) //정상적으로 빈화면 렌더링

list && list.map((e, i) => { return(<li>{e}</li>)}) //정상적으로 빈화면 렌더링