[React] 이미지 로딩화면 구현하기

프로젝트 : photoday ( 사진공유 사이트 )

기존의 상세페이지에서 메인이미지를 보여줄 때 잠깐이지만 엑박표시가 지나가는 것에 대해서 어떤 식으로하면
사용자에게 거부감없이 로딩중이랑는 시각적인 피드백을 줄 수 있을지 고민을 통해 작업하였다.

기존의 코드에서 useEffect hook을 통해 상세페이지가 렌더링 될 때 이미지에대한 정보를 가져와 url을 통해 이미지를 출력하였는데,

useEffect(()=>{
	axios
		.get(`${import.meta.env.VITE_APP_API}/images/${id}`, headers)
  		.then((res) => {
      		const response = res.data.data;
      		setDetailInfo({
        	image: response.imageUrl,
      	});
},[]);

<img src={detailInfo.image} alt='상세이미지' />

👆🏻 이런 식으로

그런데 요청에 대한 응답을 받기 전에 페이지가 먼저 렌더링되면 이미지태그에 엑박표시가 뜨는 현상이 보였다.

그래서 찾아보던중 로딩화면을 API요청을 기점으로 요청에 대한 응답을 받아오기 전까지 띄워준다는 글을 보았다.

그래서 바로 적용👇🏻

먼저 로딩중과 로딩이 끝났을때를 useState hook을 통해 상태를 만들어준다.

const [loding, setLoding] = useState(false);

그 다음, useEffect를 통해서 API요청을 보내고 있으니 요청을 보내기 전에 먼저 true로 해주고 난뒤,
응답을 받아오면 false로 다시 바꿔 응답받아온 이미지를 보여주기로 했다.
위의 코드를 아래와 같이 수정해주었다.

useEffect(()=>{
  	setLoding(true);
  	axios
  		.get(`${import.meta.env.VITE_APP_API}/images/${id}`, headers)
    	.then((res) => {
        	const response = res.data.data;
        	setDetailInfo({
          	image: response.imageUrl,
        });
	setLoding(false);
  },[]);

이렇게 바꾼다면 이미지태그 부분도 삼항연산자로 loding의 상태에 따라 바뀌게끔 작성해준다.

{loding ? (
                <로딩화면 />
              ) : (
                <img src={detailInfo.image} alt="상세이미지" />
              )}

이렇게 해주면 loding의 상태에따라 응답이 끝나면 false가 되어 메인이미지가 나타난다.

그리고 로딩화면에 대해서도 좋은 사이트가 있었는데,

loding.io

이 사이트에가면 free로 몇가지 모양의 로딩화면을 쉽게 만들수있었다.

나는 별로 바꾸지 않고 기본에서 색상을 프로젝트사이트의 메인컬러로 바꾸어주고, 배경을 투명으로 해주었다.
그 다음 gif으로 export해서 저장하고. 컴포넌트를 만들었다.

👆🏻 이런 식으로

결과적으로, 전보다 훨씬 깔끔하게 바뀌었고 사용자의 입장에서 거부감이 없는 즉각적인 피드백을 줄 수 있었다.