성능 최적화하기 - (14) 이미지 Preload

 

react-lazyload를 사용한다.

vue에도 vue-lazyload가 있다!

 

 

◽ react-lazyload 설치하기

npm i --save react-lazyload

 

[사용예제]

import React from 'react';
import styled from 'styled-components';
import { useDispatch } from 'react-redux';
import { showModal } from '../redux/imageModal';
import LazyLoad from 'react-lazyload';

function PhotoItem({ photo: { urls, alt } }) {
  const dispatch = useDispatch();

  const openModal = () => {
    dispatch(showModal({ src: urls.full, alt }));
  };

  return (
    <ImageWrap>
      <!-- offset: px 기준 -->
      <LazyLoad offset={1000}>
        <Image src={urls.small} alt={alt} onClick={openModal} />
      </LazyLoad>
    </ImageWrap>
  );
}