React에서 뼈대 어셈블리를 구현하는 3가지 방법
15756 단어 webdevuxreactjavascript
웹 사이트나 프로그램을 불러올 때 공백의 흰색 페이지나 무한 회전하는 바퀴를 보는 것만큼 나쁜 것은 없다.다행히도, 오늘날 대부분의 현대 사이트나 응용 프로그램은 우리의 초조함과 좌절을 줄이기 위해 골격 구성 요소를 사용한다.
본고에서 뼈대 부품이 무엇인지, 왜 중요한지, 그리고 그것을 어떻게 실현하는지 토론해 봅시다.
뼈대 어셈블리란?
뼈대 구성 요소는 스크린이나 웹 페이지를 로드할 때 실제 컨텐트를 로드하기 전에 사용자가 볼 수 있는 자리 표시자 요소입니다.
일반적으로 두 가지 유형의 뼈대 어셈블리가 있습니다.
다른 한편, 색 자리 차지 문자는 실제 사용자 인터페이스의 크기와 모양을 모의할 뿐만 아니라 색도 모의한다.이러한 자리 표시자는 UI에 대한 자세한 정보를 미리 알아야 하며 구현이 더 어려울 수 있습니다.다음은 Pinterest의 색상 자리 표시자 예입니다.
뼈대 어셈블리의 중요성
뼈대 어셈블리를 갖는 것은 일반적으로 사용자에게 화면에 표시되는 내용에 대한 정보를 제공하기 때문에 UI/UX 모범 사례로 여겨집니다.
그 밖에 연구에 의하면 공백 화면이나'로드...'에 비해 골격 구성 요소는 사이트를 더욱 충실하고 빠르며 응답이 빠르다는 것을 느꼈다스크린.
애니메이션 뼈대 어셈블리는 사용자 환경을 개선할 수도 있습니다.왼쪽에서 오른쪽으로 물결처럼 애니메이션을 설정하는 뼈대 어셈블리는 정적 어셈블리보다 빠르게 로드됩니다.다음은 애니메이션 뼈대 어셈블리의 예입니다.
프레임워크 구성 요소가 웹 사이트에 왜 유용한지 알았으니, 프로그램에 응답하기 위해 프레임워크 UI를 추가하는 일반적인 3가지 방법을 살펴보겠습니다.
1. 재료 인터페이스
Material UI에는 애플리케이션에서 직접 사용할 수 있는 Skeleton이라는 구성 요소가 있습니다.일반적인 사용 방법은 데이터가 로드되지 않은 경우 뼈대 어셈블리를 표시하는 조건 렌더링입니다.
import Skeleton from '@mui/material/Skeleton';
export default function App() {
const item = //some fetch function here
return ({
item ? (
<img alt={item.title} src={item.src}/>
) : (
<Skeleton variant="rectangular"/>
);
})
}
펄스 애니메이션의 예:
2. 리액션 탑재 골격
Material UI 뼈대 외에도
react-loading-skeleton백 같은 좋은 대안이 있습니다.간단한 설치부터 시작합니다.
yarn add react-loading-skeleton
npm install react-loading-skeleton
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
return (
<SkeletonTheme baseColor="#202020" highlightColor="#444">
<p>
<Skeleton count={3} />
</p>
</SkeletonTheme>
)
비록 더 복잡한 응용 프로그램에 많은 맞춤형 제작을 제공하지는 않지만, 간단한 형태 (예를 들어 직사각형과 원형) 를 차지 문자로 사용하는 사용자 인터페이스의 응용 프로그램이라면 충분하다.
오픈 소스 세션 재방송
생산 환경에서 웹 응용 프로그램을 디버깅하는 것은 어렵고 시간도 소모될 수 있다.OpenReplay는 풀스토리, 로그 로켓과 Hotjar의 소스 대체품이다.사용자가 한 모든 것을 감시하고 재방송할 수 있으며, 모든 문제에 대한 응용 프로그램의 표현을 보여 줍니다.
이것은 브라우저의 검사기를 열고 사용자의 어깨를 보는 것과 같다.
OpenReplay는 현재 유일하게 사용할 수 있는 오픈 소스 대안입니다.
즐거움 디버깅, 현대 전단 팀-Start monitoring your web app for free.
3. 반응 내용 캐리어
뼈대 어셈블리로 복잡한 형태를 지원할 수 있는 라이브러리를 찾으려면
react-content-loader를 선택합니다.응용 프로그램에 필요한 뼈대 어셈블리를 설계, 레이아웃, 애니메이션, 만들기 및 조정하는 다양한 방법을 제공합니다.SVG 기반 API이기 때문에 뼈대의 모든 SVG 형태를 지원합니다.
또한 프레임워크 사용자 인터페이스를 미리 볼 수 있고 코드를 응용 프로그램에 직접 복사할 수 있는 플랫폼을 제공합니다.만약 응용 프로그램이 유사한 레이아웃을 실현한다면 페이스북, 인스타그램 등도 미리 설정되어 있을 것이다.
운동장 캡처https://skeletonreact.com/:
이 라이브러리는 각각 프로그램 구성 요소에 프레임워크 구성 요소를 만들어야 한다는 것을 주의하십시오.이것은 지루할 수도 있고 SVG 맞춤형 구성 요소를 통해 새로운 개발자에게 좋은 학습 과정이 될 수도 있다.
예를 들어 다음은 간단한 프레임 화면과 그것을 어떻게 사용하는지
react-content-loader.
import ContentLoader from "react-content-loader"
export default const MyLoader = (props) => (
<ContentLoader
speed={2}
width={476}
height={124}
viewBox="0 0 476 124"
backgroundColor="#f3f3f3"
foregroundColor="#ecebeb"
{...props}
>
<rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
<rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
<rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
<rect x="0" y="72" rx="3" ry="3" width="380" height="6" />
<rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
<circle cx="20" cy="20" r="20" />
</ContentLoader>
)
결론
한 마디로 하면 골격 부품은 사용자 체험에서 빠질 수 없는 일부분이다.그것은 데이터를 불러오는 속도에 대한 착각을 불러일으키고, 페이지가 불러오기 전의 모습을 이해하게 한다.
본고에서 나는 프레임 구성 요소를 실현하는 세 가지 간단한 방법만 보여 주었지만 여전히 많은 옵션이 있고 각각의 장점과 단점이 있다.또는 기본 CSS를 사용하여 자체 뼈대 어셈블리를 생성할 수 있습니다.당신의 요구에 가장 적합한 것을 탐색하고 찾는 것이 중요하다.
읽어 주셔서 감사합니다. 저는 이것이 식견이 있는 책이길 바랍니다.만약 이전에 이 라이브러리를 사용한 적이 있다면, 아래의 평론에 당신이 가장 좋아하는 아이디어를 남겨 주십시오.건배!
리소스
영상 학점
https://i.pinimg.com/originals/3c/f2/e9/3cf2e97fd053832dad0031342602588f.gif
Reference
이 문제에 관하여(React에서 뼈대 어셈블리를 구현하는 3가지 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/asayerio_techblog/3-ways-to-implement-skeleton-components-in-react-2i0n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
