[React]props가 Null일 때

위의 코드는 아래 에러를 발생한다.

import React from 'react';

const VideoDetail = ({videos})=> {

const videoId = videos.id.videoId;

const url = `http://www.youtube.com/embed/${videoId}`;

return (

<div className="video-detail col-md-8">

<div className="embed-responsive embed-responsive-16by9">

<iframe className = "embed-responsive-item" src={url}></iframe>

</div>

<div className = "details">

<div>{videos.snippet.title}</div>

<div>{videos.snippet.description}</div>

</div>

</div>

);

};

export default VideoDetail;

비디오 디테일은 다음을 리턴한다.

리턴에는 props의 videos들이 있다.

왜 그런데 videos가 정의되어 있지 않다는 오류가 뜰까?

다시 위 코드를 보면

최초에 constructor가 state를 초기화 시킨다.

이후에 YoutubeSearch가 videos를 찾아서 state에 작성한다.

이때 YoutubeSearch가 찾기 전

VideoList가 리턴 할 videos이 빈 배열이기 때문에 오류가 발생한다.

그렇기 때문에

import React from 'react';

const VideoDetail = ({videos})=> {

if(!videos){

return <div>Loading...</div>

}

위와 같이 videos가 빈 배열일 시에는 Loading을 렌더링 하고

state가 바뀌면 태그들을 렌더링 하는 식으로 다룬다.