React를 사용하여 DOM을 렌더링하는 동안 로드 화면
-
DOM이 React를 사용하여 렌더링하는 동안
this.state기능을 사용하여 화면 로드 -
DOM이 React를 사용하여 렌더링하는 동안
useEffect후크를 사용하여 화면 로드 -
DOM이 React를 사용하여 렌더링하는 동안
react-loader-spinner종속성을 사용하여 화면 로드 - 결론
웹 개발은 버그 없이 빠르게 로드되는 앱을 만드는 것뿐만 아니라 앱을 아름답고 매력적이며 보기 좋게 만드는 것이기도 합니다. React에서 앱을 시작할 때 우리를 맞이하는 빈 페이지가 기쁘다고 말할 수는 없습니다. 눈에.
React DOM이 페이지의 기본 콘텐츠를 렌더링하기 직전에 표시되는 효과를 생성하여 이 빈 페이지에 대해 무언가를 할 수 있으며 이를 수행하는 방법에는 여러 가지가 있습니다.
DOM이 React를 사용하여 렌더링하는 동안 this.state 기능을 사용하여 화면 로드
이 예제는 응용 프로그램의 로딩 시간을 활용하여 훨씬 더 간단한 접근 방식을 제공합니다. project 폴더의 App.js 파일 안에 다음 코드를 입력합니다.
코드 스니펫 - App.js:
import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
loading: false,
character: {}
}
}
componentDidMount() {
this.setState({loading: true})
fetch("https://swapi.dev/api/people/1/")
.then(response => response.json())
.then(data => {
this.setState({
loading: false,
character: data
})
})
}
render() {
const text = this.state.loading ? " page is loading..." : this.state.character.name
return (
<div>
<p>{text}</p>
</div>
)
}
}
export default App
출력:
우리는 fetch() API를 사용하여 영화 캐릭터의 이름, 즉 페이지에 표시되는 주요 콘텐츠를 가져옵니다. 우리는 this.state 기능을 사용하여 React에 페이지 콘텐츠를 가져오는 동안 대신 page is loading...을 표시하고 몇 초 후에 주요 콘텐츠인 Luke Skywalker가 표시되도록 합니다.
DOM이 React를 사용하여 렌더링하는 동안 useEffect 후크를 사용하여 화면 로드
React useEffect는 화면에 콘텐츠를 표시하고 애니메이션을 움직이는 좋은 접근 방식이며 이 접근 방식을 사용하여 사전 로드 화면을 만들 것입니다.
먼저 project 폴더의 public 폴더에 있는 index.html 파일에 액세스하고 거기에 로딩 화면 효과를 만듭니다. 이미지에는 링크가 있으며 이를 활용하여 스타일을 만듭니다.
아래 코드를 참조하십시오.
코드 스니펫 - index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<style>
.preloader {
display: flex;
justify-content: center;
}
.rotate {
animation: rotation 9s infinite linear;
}
.loader-hide {
display: none;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="preloader">
<img src="https://previews.123rf.com/images/nolimit46/nolimit462006/nolimit46200600489/148500740-modern-glowing-preloader-and-progress-loading-circle-bar-3d-render-background.jpg" class="rotate" width="100" height="100" />
</div>
<div id="root"></div>
</body>
</html>
그런 다음 App.js에서 useEffect를 적용하여 index.html 내부의 CSS 지원으로 로딩 효과를 제어합니다.
코드 스니펫 - App.js:
import React, { useEffect } from "react";
import "./App.css";
const loader = document.querySelector(".preloader");
const showLoader = () => loader.classList.remove("preloader");
const addClass = () => loader.classList.add("loader-hide");
const App = () => {
useEffect(() => {
showLoader();
addClass();
}, []);
return (
<div style={{ display: "flex", justifyContent: "center" }}>
<h2>App react</h2>
</div>
);
};
export default App;
출력:
DOM이 React를 사용하여 렌더링하는 동안 react-loader-spinner 종속성을 사용하여 화면 로드
React Loader 종속성은 반응에서 아름다운 사전 로드 화면을 만드는 데 적합한 예입니다. 웹 사이트 방문자가 웹 사이트에 들어가기 전에 좋아할 다양한 로딩 효과를 제공합니다.
우리가 만든 project 폴더 안에 다음을 사용하여 종속성을 설치합니다.
npm install react-loader-spinner
그런 다음 components라는 폴더와 Loading.js 및 Clock.js라는 두 개의 파일을 만듭니다. Loading.js에는 로딩 화면 효과에 대한 코드가 포함되며 Clock.js에는 기본 페이지 콘텐츠가 표시됩니다.
그런 다음 App.js 파일로 이동하여 설정합니다.
코드 스니펫 - App.js:
import React, {useState, useEffect} from 'react';
import Loading from './components/Loading';
import Clock from './components/Clock';
function App() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 2500);
})
return (
<div>
{isLoading===true?
<Loading/>:
<Clock/>
}
</div>
);
}
export default App;
우리는 useState 후크를 사용하여 Loading 구성 요소의 상태를 제어하고 useEffect를 사용하여 기본 페이지가 DOM에서 렌더링되기 전에 로딩 화면이 얼마나 오래 남아 있는지 React에 알려줍니다.
그런 다음 로딩 화면을 설정하려는 Loading.js 파일에서 로더 스피너 종속성 및 종속성에 대한 CSS 설정에서 원하는 종류의 효과를 가져옵니다. 그런 다음 이 사이트에서 해당 특정 효과에 대한 설정을 복사하여 붙여넣습니다.
https://www.npmjs.com/package/react-loader-spinner
이것은 다음 코드와 같아야 합니다.
코드 스니펫 - Loading.js:
import React from 'react'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import { Puff } from 'react-loader-spinner'
const Loading = () => {
return (
<div align="center">
<Puff
height="100"
width="100"
color='grey'
ariaLabel='loading'
/>
</div>
)
}
export default Loading
마지막으로 Clock.js 내부 페이지의 주요 콘텐츠를 다음과 같이 설정합니다.
코드 스니펫-Clock.js:
import React from 'react'
const Clock = () => {
return (
<div align='center'>
<h1>CLOCK</h1>
</div>
)
}
export default Clock
출력:
App.js 파일 내부에 설정한 대로 로딩 화면이 수명 주기에 도달하면 Clock.js 파일 내용이 표시됩니다.
결론
방문자를 놀라게 할 아무것도 없는 지루한 웹 사이트 구축을 피하고 싶은 사람이 누구입니까? 로딩 화면을 만드는 것은 방문자가 웹 사이트가 로드될 때까지 빈 화면을 응시하는 대기 시간을 줄이는 한 가지 방법입니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn