스켈레톤 컴포넌트가 필요한 이유?

데이터를 가져와서 보여주는 경우에는 인터넷 환경에 따라 시간이 걸린다.
데이터를 가져와서 그려주기 때문에 데이터가 오지 않는다면 화면에 표시되지 않을 것이다.
그래서, 데이터를 가져오기 전에 사용자에게 데이터를 불러오는 동안 표시될 수 있도록 스켈레톤(뼈대만 있는) 컴포넌트를 보여준다면
사용자는 하얀 화면을 보는 것보다 기다리기 쉬울 것이다.

간단한 구현

codesandbox에서 살펴보기

간단하게 데이터를 가져오고 데이터가 불러와지는 시간을 2초의 간격을 두고 불러오고, 데이터가 불러와지기 전에는 Skeleton 컴포넌트들을 보여줬다. 확실히, 스켈레톤을 적용하니, 데이터가 불러와지는 동안 흰색화면이 아니라 데이터가 불러와진다는 상황이 눈에 보여지니 UX는 좋은 것 같다. 데이터를 그려주는 컴포넌트랑 비슷하게 스켈레톤 컴포넌트를 만들어줘야하기 때문에 쉽지 않지만, 그래도 UX를 생각한다면 고려해보는 것도 좋을 것 같다.

참고

출처: Toast UI, 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기
원문: https://medium.com/better-programming/build-a-skeleton-component-in-react-for-better-ux-b1dca9d783e6