1차 프로젝트 Day 10🔥
(로딩 페이지)
아래 굵은 글씨 부분이 내가 구현 한 /구현 할 부분
페이지가 로딩 될때 화면에 아미 로고가 gif로 화면 중간에 보여지는데, 상품 상세 페이지에 이를 적용했다.
로딩 페이지는 boolean 값으로 state로 관리
되어야 하고, fetch되기 전에 화면에 보여줘야 함
으로 ComponentDidMount()
내 에서 fetch 전 true
, fetch되면 false
값으로 설정이 중요하다.
fetch 되기 전의 찰나가 너무 짧아서 화면에 보여지지 않을 것 같아 발표 시 구현 될 수 있도록 fetch를 setTimeout 비동기 함수에 넣어서 렌더 1 초 후 fetch 되도록 설정
하였다.
componentDidMount() {
const { id, colorId } = this.props.match.params;
//동적라우팅 적용 관련은 다음 포스팅에서 다룰 예정
this.setState({ isLoading: true });
//먼저 fetch 전 isLoading의 state를 true로 업데이트 한다.
setTimeout(() => {
fetch(`http://13.125.209.103:8000/product/${id}/color/${colorId}`)
.then((res) => res.json())
.then((res) =>
this.setState({
isLoading: false,
})
//response를 성공적으로 받아 올때 isLoading을 false로 업데이트 한다.
);
}, 1000);
//setTimeout을 통해 fetch를 1초 후에 되게끔 설정하면 초반에 loading중 화면을 확인 할 수 있다.
{isLoading ? (<LoadingPage />) : (
<>중략</>
)}