뼈대 로드 및 React에서 구현하는 방법

배경.

지난주에 나는 흥미로운 라인 토론을 보았는데, 어떻게 Largest Contentful Paint (LCP)시간을 줄이는지 토론했다. 이것은 구성 요소를 불러오는 데 시간이 오래 걸리기 때문이다.

년에 LCP는 구글이 발표한 Core Web Vitals의 세 가지 지표 중 하나로 인터넷에서 뛰어난 사용자 체험을 제공하는 데 매우 중요하다.핵심 웹 Vitals 점수는 당신의 웹 페이지가 검색 순위에 반영되는 데 영향을 줄 수 있습니다. 이것은 검색 엔진 최적화(SEO) 개념입니다. 우리가 웹 사이트의 상업적 가치를 고려하기 시작하면 개발자는 이 점을 의식해야 합니다.

귀하는 구글이 제공하는 Lighthouse 보고 서비스를 사용하여 다양한 유형에 따라 귀하의 웹 페이지 품질을 확정할 수 있습니다.LCP는 성능이 좋지 않은 측면으로 여겨진다.

스레드 이니시에이터의 최초 권장 사항은 다음과 같습니다.

느린 구성요소가 로드될 때까지 자리 표시자 이미지를 사용합니다.

을 교체하십시오.

다른 사용자는 이어서 이것이 사실상 골격을 탑재하는 일종의 실현이라고 지적했다. 나는 이전에 이 짧은 말을 들어 본 적이 없다🧠
그래서 나는 이 글을 써서 나의 발견을 공유하기로 결정했다💪 만약 네가 이 글을 읽는 것을 좋아한다면, 나도 마지막에 이 자원을 공유할 것이다.

로드 개념에 대한 재고🔃

이 문제에 직면하기 전에, 나는 모든 구성 요소가 데이터 획득이나 데이터베이스 업데이트 등 느린 작업으로 인해 불러오는 상태가 필요하다면, 불러오는 마이크로스피커를 추가하기만 하면 된다는 선입적인 생각을 해 왔다.
그러나 내가 인터넷에서 골격 탑재가 통상적으로 어떻게 실현되는지 읽을 때 우리는 때때로 소셜 미디어, 신문과 지역사회 플랫폼에서 이 특정한 구성 요소를 볼 수 있다👇

UX Collective의 예
즉, 이 어셈블리를 뼈대 로드 어셈블리라고 하는 이유는 다음과 같습니다.
🦴 ➡️ 🍖 ➡️ 🍗

어셈블리는 처음에 뼈대였습니다.🦴

사용자가 볼 내용의 대략적인 레이아웃을 나타냅니다.

골격 부분에 천천히 더 많은 고기를 싣는다🍖

은 사용자에게 더 유용한 내용을 보여주고 표시합니다.

은 사용자에게 구성 요소가

에 로드될 때까지 기다리는 진행을 제공합니다.

구성 요소가 완전히 로드된 후에도 사용자는 여전히 북채의 뼈를 잡아야 한다🍗

어셈블리는 모 어셈블리에 대한 레이아웃과 동일해야 합니다.

은 모든 구성 요소가 로드되고 표시되려는 내용이 표시되더라도 일관성 있고 일관된 사용자 환경을 제공합니다.

그 후에 나는 그것이 통상적으로 어떻게 실현되는지 살펴보았다.

뼈대 로드는 일반적으로 어떻게 이루어집니까

흔한 가방 두 개를 제시했어요.

react-loading-skeleton

@material-ui/core

각 패키지의 뼈대 컴포넌트를 사용하는 방법에 대한 예는 웹 사이트에 포함되어 있습니다.이 두 가지 예에서 구성 요소 표현 방법은 모두 구성 요소에서 if else 조건 표현 문장을 직접 사용해야 한다.

반응 로드 뼈대 라이브러리

react-loading-skeleton의 예

<div style={{ fontSize: 20, lineHeight: 2 }}>
  <h1>{this.props.title || <Skeleton />}</h1>
  {this.props.body || <Skeleton count={10} />}
</div>

비록 2.1k가 있지만⭐ Github repository에서 그들의 문서에서 구성 요소의 특정한 변체가 어떤 모양인지 찾기 어렵다.그러나, 나는 그들이 이야기책 (전방 구성 요소를 보여주는 유행 라이브러리) 을 가지고 있다는 것을 알아차렸다.만약 당신이 흥미가 있다면 그것을 복제하고 로컬에서 시작해서 그들이 무엇을 제공했는지 보십시오.

재료 사용자 인터페이스 라이브러리

@material-ui/core의 예

{item ? (
  <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
) : (
  <Skeleton variant="rect" width={210} height={118} />
)}

뼈대 어셈블리 유형에 대한 자세한 내용은 their site에 액세스하여 직접 확인할 수 있습니다.Github repository for this library은 67.6k⭐.

Skeleton의 Material UI 문서 페이지 캡처
Material UI에는 마이크로스피커 탑재를 피해야 하는 이유에 대한 내용도 this article by Luke Wroblewski(현재 구글의 제품 디렉터)이 포함돼 있다.

생각할 만한 물건을 포장하다🍎

만약 우리가 골격 부품이 필요하다면, 이 두 가방은 보기에 매우 좋다.Material UI 라이브러리에는 프레임뿐만 아니라 다양한 구성 요소, 스타일 및 기능이 포함되어 있습니다.그러나 만약 우리가 그것을 사용하지 않는다면, 우리가 프로그램을 구축하고 묶을 때, 그것은 더 많은 파일 크기를 차지할 수 있다.어떤 소프트웨어 패키지를 사용할지 결정할 때, 너는 반드시 이해득실을 따져야 한다.

코드 예시는 고려할 만하다🍏

사실 나는 이 두 개의 뼈대 구성 요소를 사용하는 예시적인 인코딩 스타일에 대해 어떤 가방을 사용하는 것이 아니라 더 흥미를 느낀다.뼈대 어셈블리를 사용하는 두 인코딩 스타일 사이에

가능한 ||

삼원 연산자 () ? () : ()은 소자에 익숙하지 않은 사람에게는 통상적으로 더 읽기 어렵다.

연산자 ||은 더 간단한 논리를 작성하도록 강요합니다.

근데 저희가 왜 이렇게 썼을까요?🤔

만약 if else 조건이 문장을 나타내지 않는다면, 정말 뼈대 구성 요소의 논리를 추가할 다른 방법이 없습니까?

많은 구성 요소가 뼈대를 필요로 한다면 어떻게 해야 합니까? 이것은 내가 렌더링 방법에서 비슷한 논리를 반복해서 작성해야 한다는 것을 의미하는 것입니까?

나는 갑자기 한 가지 생각이 떠올랐다💡 - 왜 React 갈고리를 사용하지 않고 프레임 논리를 실현합니까?✨

💡 So, I'll try to do that and share the results of my attempt in the next article, look forward to that!

또한, 다음은 내가 이 글을 쓰기 전에 통독한 참고 자료입니다. 그것들은 매우 통찰력이 있어서 당신도 그것들을 볼 수 있습니다!

리소스

React Skeleton과 리소스를 사용하는 이유에 대해 설명합니다.

속도 외관 디자인에 관한 기사: https://juneuprising.medium.com/designing-for-the-appearance-of-speed-aaabc7f568c2

React skeleton vs Loading Spinner 연구 기사: https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a

React Skeleton의 리소스 구현 방법:

React 컨텐츠 로더 만들기 - 애니메이션 뼈대 화면 구성 요소를 쉽게 만들 수 있는 도구: https://skeletonreact.com/

react-loading-skeleton 패키지를 어떻게 사용하여React 골격을 실현하는지에 관한 글: https://betterprogramming.pub/the-what-why-and-how-of-using-a-skeleton-loading-screen-e68809d7f702

재료 UI 반응 뼈대: https://material-ui.com/components/skeleton/

결론

본문을 읽어 주셔서 대단히 감사합니다!🌟
마음 하나 를 남기다💌 딱정벌레가 한 마리 더 있어요.🦄 만약 네가 이 문장을 좋아한다면!
아래에서 저에게 피드백을 좀 주세요.👇 나는 네가 이 글을 읽은 후의 느낌을 듣고 싶거나, 네가 나에게 사용자 정의 갈고리를 어떻게 만드는지 배우는 것에 대해 어떤 건의가 있는지 듣고 싶다.