react youtube-clone 목록으로 돌아가기

검색을 하고나서, 또 다시 새로운 것을 검색할 때, 기존에 있는 목록으로 돌아가고 싶다.

 

지금은 렌더 부분에서 selectedVideo가 상태를 기준으로 보이고 안보이고 조건을 지정해주었기 때문에,

우리는 search 부분에서 상태만 변경해주면 된다.

 

const search = query => {
	youtube.search(query)
    		.then(videos => setVideos(videos);
            setSelectedVideo(null);
     });
};

이렇게 search 부분에서 setVideos(videos) 를 넣어준 뒤, setSelectedVideo는 null로 변경해주면 된다.

 

const search = query => {
	setSelectedVideo(null);
	//로딩스패너를 넣어도 됨
    youtube.search(query)
    		.then(videos => setVideos(videos);
            //error state도 만들 수 있다.
     });
};

이렇게 처음부터 null로 변경 후, video를 넣어줄 수도 있다. 이러한 과정에서 사용자에게 로딩 스패너 라던지,

불러오지 못했을 경우 error state 도 만들어 볼 수 있다 (나중에 해볼 예정)