React에서 완전히 사용자 정의 가능한 콘텐츠 로더를 만드는 방법

소개

로더는 거의 모든 애플리케이션의 일부입니다. API에서 일부 데이터를 로드할 때마다 데이터가 로드되고 있음을 사용자에게 알리기 위해 로드 메시지 또는 로드 아이콘을 표시해야 합니다.

이 기사에서는 컨텐츠 로더와 같은 사용자 정의 가능한 Facebook , Instagram 또는 Grid를 표시합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

유효한 Git 설치.

Node.js가 로컬로 설치되었습니다.

이 가이드는 Node v13.14.0, npm v6.14.4, react v16.13.1 및 react-content-loader v.5.1.0에서 확인되었습니다.

1단계 — 반응 앱 설치 및 실행

시작하려면 터미널에서 다음 명령을 실행하여 복제this GitHub repository

git clone https://github.com/myogeshchavan97/react-content-loader-demo.git

시작 코드는 starter-code 분기에 있고 완전한 소스 코드는 마스터 분기에 있으므로 터미널에서 다음 명령을 실행하여 starter-code 분기로 전환하십시오.

git checkout starter-code

버전 5.1.0으로 종속성 및 react-content-loader 패키지를 설치하고 React 앱을 시작합니다.

npm install
npm install react-content-loader@5.1.0
npm run start

2단계 - 콘텐츠 로더를 앱에 통합

이제 components 폴더 안에 새 src 폴더를 만들고 그 안에 다음 내용으로 새 파일FacebookLoader.js을 추가합니다.

import React from 'react';
import { Facebook } from 'react-content-loader';
const FacebookLoader = () => {
  return (
    <div>
      <h2>Facebook Loader</h2>
      <Facebook />
    </div>
  );
};
export default FacebookLoader;

여기에서 Facebook 패키지의 기본react-content-loader 로더 구성 요소를 추가했습니다.

이제 src/App.js를 열고 위의 FacebookLoader 구성 요소를 사용하겠습니다.

import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <FacebookLoader />
    </div>
  );
}
export default App;

그러면 다음과 같은 로더가 생성됩니다.

3단계 - 로더 사용자 정의

이제 다음 내용으로 InstagramLoader.js 폴더 안에 새 파일components을 만듭니다.

import React from 'react';
import { Instagram } from 'react-content-loader';
const InstagramLoader = () => {
  return (
    <div>
      <h2>Instagram Loader</h2>
      <Instagram width={500} height={500} backgroundColor="#cebaba" speed={3} />
    </div>
  );
};
export default InstagramLoader;

여기에서 로더를 사용자 지정하기 위한 추가 소품을 제공했습니다.

로더 너비와 높이를 픽셀(px) 단위로 지정하는 너비 및 높이 소품

로더의 배경을 지정하는 backgroundColor

애니메이션 속도를 초 단위로 지정하는 속도

이제 src/App.js를 열고 위의 InstagramLoader 구성 요소를 사용하겠습니다.

import React from 'react';
import FacebookLoader from './components/FacebookLoader';
import InstagramLoader from './components/InstagramLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <InstagramLoader />
      <FacebookLoader />
    </div>
  );
}
export default App;

이제 다음과 같은 맞춤형 Instagram 로더를 볼 수 있습니다.

4단계 — 사용자 지정 SVG 코드를 사용하여 로더 사용자 지정

react-content-loader 웹 사이트는 다른 속성과 함께 로더의 배경 이미지 또는 방향을 지정하여 고유한 사용자 정의 로더를 만들 수 있는 UI 도구도 제공합니다. 확인할 수 있습니다HERE.

웹 사이트는 또한 사용할 수 있는 다양한 로더 갤러리를 제공합니다.

예를 들어 Grid Layout Loader를 사용하려면 다음 내용으로 GridLayoutLoader.js 폴더 안에 새 파일components을 만듭니다.

이제 src/App.js를 열고 위의 GridLayoutLoader 구성 요소를 사용하십시오.

import React from 'react';
import InstagramLoader from './components/InstagramLoader';
import GridLayoutLoader from './components/GridLayoutLoader';
import FacebookLoader from './components/FacebookLoader';
import './App.css';
function App() {
  return (
    <div className="App">
      <GridLayoutLoader />
      <InstagramLoader />
      <FacebookLoader />
    </div>
  );
}
export default App;

사용 가능한 모든 로더 갤러리를 볼 수 있습니다HERE.

결론

보시다시피 콘텐츠 로더는 콘텐츠에 대한 사용자 지정 애니메이션을 사용하여 응용 프로그램을 보기 좋게 만듭니다.

이 기사의 전체 소스 코드는 GitHub의 react-content-loader-demo 저장소를 확인하십시오. live demo of this application도 볼 수 있습니다.

받은 편지함here에서 놀라운 팁, 요령 및 기사가 포함된 주간 뉴스레터를 구독하려면 구독하는 것을 잊지 마십시오.