존재하지 않는 props인 missing 객체의 value를 조회해서 렌더링해 주려고 합니다. 이렇게 하면 당연히 브라우저에는 에러가 발생합니다. 한번 확인해 볼까요?

▲ 그림 7-9 컴포넌트 에러 발생

 

저장하고 나면 그림 7- 9 왼쪽과 같이 에러가 발생할 것입니다. 이렇게 어디에서 에러가 발생했는지 알 수 있는 정보가 나타난 것은 우리가 현재 개발 서버를 실행 중이기 때문입니다. 해당 페이지의 오른쪽 상단에 있는 X 버튼을 누르면 오류 창이 닫힙니다. 닫히고 나면, 그림 7- 9의 오른쪽과 같이 아무것도 보이지 않고 흰 페이지만 남습니다.

만약 사용자가 웹 서비스를 실제로 사용할 때 이렇게 흰 화면만 나타나면 어리둥절할 것입니다. 이럴 때는 에러가 발생했다고 사용자에게 인지시켜 주어야 합니다.