[UI] react lazy && skeleton ui
8581 단어 skeletonUIreact-lazyReactReact
react의 lazy
사진을 불러올 때, 빈 칸이 생겨서 랜더링을 하면서 요소가 이동한다고 생각해서 그 안에 skeleton ui를 넣어주기로 했다.
const Avatar = ({
shape,
width,
height,
border,
url = imageUrl('default.png'),
...arg
}) => {
const env =
process.env.NODE_ENV === 'development'
? process.env.REACT_APP_DEVELOPMENT_API
: process.env.REACT_APP_PRODUCTION_API;
const removeUndefinedUrl =
url === `${env}image/undefined` ? imageUrl('default.png') : url;
const LazyImage = lazy(() => import('components/Reusable/LazyImage'));
// lazy안에 콜백으로 promise가 들어가야 한다.
return (
<Container
shape={shape}
width={width}
height={height}
border={border}
{...arg}
>
<Suspense
fallback={<Skeleton width={width} height={height} shape={shape} />}
> // Suspense를 사용해서 LazyImage가 불러와지는 동안 fallback의 component 보여줌
<LazyImage src={removeUndefinedUrl}></LazyImage>
</Suspense>
</Container>
);
};
// LazyImage.jsx
const LazyImage = ({ src }) => {
return <img src={src} alt="" />;
};
// skeleton
const Skeleton = ({ width, height, shape }) => {
return <Container width={width} height={height} shape={shape}></Container>;
};
여기에 keyframes를 사용해서 animation을 넣었다.
참조
-
react lazy, suspense
https://velog.io/@ansrjsdn/React.lazy-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 -
skeleton ui
https://velog.io/@eunoia/PureCSS%EB%A1%9C-Skeleton-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0
Author And Source
이 문제에 관하여([UI] react lazy && skeleton ui), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@raverana96/UI-react-lazy-skeleton-ui저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)