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

김태완·2021년 12월 20일
0

자바스크립트 문법

목록 보기
1/14
post-custom-banner

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>)}) //정상적으로 빈화면 렌더링
profile
프론트엔드개발

0개의 댓글