[Error handling] TypeError: Cannot read property 'map' of undefined
- Dominant language
- JavaScript
- Stars
- 0
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
> > 해결된 에러라면 라벨에 'Complete' 를 달아주세요.
> > 미해결된 에러라면 라벨을 'In progress' 로 변경해주세요.
>
> ### 어떤 에러인가요?
> 데이터를 프롭스로 전달하고 맵 함수를 돌릴 때 맵 함수를 인식하지 못합니다.
>
> ### 에러 메시지
> ```shell
> $ TypeError: Cannot read property 'map' of undefined
> ```
>
> ### 에러 핸들링 방법
> * 문제 원인
> React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 imgs.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다.
>
> * 해결 방법
> &&을 이용한다.
> JavaScript에서 true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다.
> ```js
> // 오류 코드
>
> {imgs.map((img, idx) => )}
>
>```
>```js
> // 해결 코드
>
> {imgs && imgs.map((img, idx) => )}
>
> ```
>
>
> ### 에러 핸들링을 위해 참고한 레퍼런스 링크
> [링크1](https://moonformeli.tistory.com/3)
> [링크2](https://devbirdfeet.tistory.com/47)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.