placehoder Loading 컴포넌트 만들기
이 번 포스팅에서는 react-content-loader 를 활용해서 위와 같은 place holder loading을 만들어 볼 생각입니다.
Sample 카드 컴포넌트 만들기
우선 위 이미지와 같은 샘플 카드를 하나 만들어 보도록 하겠습니다.
styled Component를 통해서 구현했으며, styled-component에 대해서 알고 싶은신 분은 링크를 통해서 좀더 자세히 확인 하실 수 있습니다.
react-content-loader
react-content-loader는 SVG 기반으로 로더를 만들어주는 라이브러리입니다. 우리가 만들 SVG를 기반으로 loader를 만들 수도 있고, 아니면 라이브러리 내에서 자체적으로 지원하는 Facebook, Instagram placeholder를 활용할 수 있습니다.
패키지 설치하기
yarn add react-content-loader페이스북 placehoder 사용하기
기본 placehoder를 사용하는 것은 어렵지 않습니다. react-content-loader 에서 원하는 place holder 컴포넌트를 import하고, 원하는 곳에 렌더링 합니다. 그렇게 되면 svg 이미지 기반 때문에, 감싸고 있는 컨테이너의 사이즈에 맞추어 자동으로 크기가 조절이 됩니다.
위와 같이 간단하게 Facebook 스타일의 placeholder가 적용된 것을 알 수 있습니다.
Custom PlaceHolder 만들기
커스텀 place holder를 만들기 위해서 링크 사이트에서 우리가 원하는 사이즈의 svg 이미지를 만들어야 합니다.
사이트에 접속하면 오른쪽 하얀색 화면에서 우리가 원하는 사이즈로 placeholder를 만들 수 있습니다. 전체 canvas의 size를 비율에 맞게끔 추가해주고, 원하는 형태의 placehoder를 만들 수 있습니다.
그런데 아쉬운 점은 되돌리기가 되지 않아서 작업하면서 계속 실수를 하게 되는 아쉬운 점이 있습니다. 직접 SVG를 생성하는 Application을 쓰고 계시는 것이 있다면 svg를 만들고 import 하는 것을 추천 드립니다.
loading state를 추가해주고, 1초가 지난 후에 loading state를 false로 변경하는 코드를 만들었습니다.
그럼 이제 다시 한 번 실행해보도록 하겠습니다.
위의 그림처럼 페이지 새로고침을 했을 때, 우리가 의도했던 대로 card placeholder가 뜬 이후, 카드가 렌더링되는 것을 알 수 있습니다. 👏👏👏
Code Pot, 챌린지
이 블로그 글은 Code Pot, 리액트 챌린지의 과제로 작성되었습니다. Code Pot, 리액트 챌린지가 궁금하다면? ⇒ 링크
전체 코드
(github 링크)에서 전체 코드를 확인 하실 수 있습니다.
