What I studied

우리가 사용하는 사이트에서 데이터를 내려받기 전까지 화면이 멈춰있다면 사용자 입장에서는 데이터를 받아오고 있는지, 오류가 난건지 등을 파악하기 힘들다. 그렇기 때문에 UX적인 부분을 고려하여 사용자에게 로딩중이라는 것을 나타내주는 것이 좋다. 그래서 많이 사용하는 것이 스피너를 활용한 로딩화면이다. 요즘은 스켈레톤도 많이 사용하는 것 같다. 리액트에서 로딩화면을 만들어줄 수 있는 방법엔 여러가지가 있는데 Gif 파일을 활용하는 방법과 React-spinners를 사용하는 두가지 방법을 알아보려고 한다. 먼저 gif 파일로 간단하게 만들어보자. 1. 리액트 로딩화면 gif 버전 먼저 Loading.jsx 컴포넌트를 생성한 후, 스피너를 다운로드하러 간다. // Loading01.jsx import Reac..
반응형
도잎
'react spinner' 태그의 글 목록