팀프로젝트 진행중 , 숙소 검색, 리스트 불러오는 중에 이미지 파일이 로딩이 지연되는 문제가 발생했다.
문제 해결을 위해 이것저것 찾아보다가, 로딩중 상태를 사용자에게 알려주는 UI중
Skeleton 이라는게 있어서 사용해보았다.
Skeleton은 다음 이미지와 같은데, 아마 한번쯤 본 적 있는 UI일 것이다.
사용법은 생각보다 되게 간단했다.
https://www.npmjs.com/package/react-loading-skeleton?activeTab=readme
우선 npm에서 react-loading-skeleton 을 검색한다.
설치는 다음과 같다.
npm install react-loading-skeleton
공식문서에 나오는 기본적인 사용법은 다음과 같다.
function BlogPost(props) {
return (
<div>
<h1>{props.title || <Skeleton />}</h1>
{props.body || <Skeleton count={10} />}
</div>
);
}Skeleton 컴포넌트를 import하여 바로 사용하면 된다.
count 는 스켈레톤 라인 수이다.
다른 주요 props들은,
- count: 스켈레톤 라인 수
- circle: 원형 스켈레톤 (border-radius: 50%)
- width: 너비
- height: 높이
- baseColor: 기본 배경색
- highlightColor: 하이라이트 색상
- duration: 애니메이션 지속 시간
- enableAnimation: 애니메이션 활성화 여부
주요 props도 몇 개 없을 뿐더러 적용방법도 되게 간단하다.
중요한 것은, 스켈레톤을 언제 적용할지이다.
지금같은 경우에는, 검색을 했을 때 검색결과를 불러오는 과정에서 시간이 소요되므로,
API 호출 과정에서 API 호출이 완료 되기 전까지 skeleton 컴포넌트를 보여주다가,
호출이 완료 되면 내가 보여주고 싶은 내용들을 보여주면 된다.
그래서 API를 호출하는 컴포넌트에서 isLoading이라는 변수를 만들고,
API 호출이 완료되기 전까지는 false값을 가지다가 API 호출이 완료되었을 때 true 값을 가지도록 상태를 관리하면 된다.
const [isLoading,setIsLoading]=useState(false);
// 중간 코드 생략 ...
// API 호출
const results = await searchAccommodations(searchParams);
setSearchResults(results); // 검색 결과 저장
console.log("검색 결과:", results);
// 여기서 검색 결과를 처리 (예: 상태 업데이트 또는 페이지 이동)
} catch (error) {
console.error("검색 오류:", error);
setError(error.message || "검색 중 오류가 발생했습니다.");
ShowAlert("info", "", error.message || "검색 중 오류가 발생했습니다.");
} finally {
setIsLoading(false); // 검색 완료 (성공/실패 모두) 후 로딩 종료
}
이제 새로고침 시 데이터를 불러올 때 skeleton ui가 적용되는 것을 볼 수 있다.
