// 클릭할때마다 loading이 활성화되고 클릭한 Type을 담는다
// 클릭한 타입과 현재의 타입이 같다면 로딩도, list도 재랜더링 되지않는다
const popularChange = (type) => {
setPopularLoading(true);
setPopularType(type);
if (type === popularType) {
setPopularLoading(false);
}
};
useEffect(() => {
async function fatchApi() {
try {
// Homebanner - 슬라이드에 탭을 둘 수 없어 movie로 고정
const main = await movieApi.popular('movie');
setMain(main.data.results);
// 현재 상영중인 작품은 movie 밖에 없어 movie로 고정
const play = await movieApi.nowPlaying('movie');
setPlaying(play.data.results);
const popular = await movieApi.popular(popularType);
setPopular(popular.data.results);
setPopularLoading(false);
.
.
.
} catch (error) {
console.log(error)
}
}
fatchApi();
}, [popularType, dayType, weekType]);
return (
<Suspense fallback={<Loading></Loading>}>
<컨텐츠>
<ul className="type_list">
// movie나 tv를 매개변수로 던져주기
<li>
<button type="button"
className={popularType === 'movie' ? 'active' : ''}
onClick={() => popularChange('movie')}>영화
</button>
</li>
<li>
<button type="button" className={popularType === 'tv' ? 'active' : ''}
onClick={() => popularChange('tv')}>TV
</button>
</li>
</ul>
</Suspense>
)
실험정신으로 Main에는 Suspense를 적용해봤다.
아직 렌더링 되지않은 컴포넌트는 fallback을 이용해 로딩 컴포넌트를 먼저 보여준다.
처음 렌더링 될때 사용하지않는 컴포넌트까지 모두 렌더링이 돌기때문에
Lazy를 통해서 동적으로 import를 하게 되면 초기 렌더링 시간을 조금이라도 줄일 수 있다.
Showing stale content while fresh content is loading
새 콘텐츠가 로드되는 동안 오래된 콘텐츠 표시하기도 가능하다고 하니 프로젝트가 커지면 더 용이할 듯 싶다.