[TIL] React에서 lazy loading 구현하기

Lazy Loading

프로젝트 진행 중에 내가 작업 중인 컴포넌트는 많은 영화 데이터를 관리하고 있어 랜더링 속도가 많이 더뎠다. 랜더링 속도를 개선하기 위해 여러가지 방법을 찾아보았다. React에서 성능을 좋게 하기 위해 할 수 있는 방법 중에 하나인 lazy-loading 기능이 있다. 간단하게 설명하면 viewport에 보여지는 부분만 먼저 랜더링하고, 나머지는 스크롤 바가 스크롤 박스에 닿을 때 마다 해당 데이터들이 보여지게 한다.

lazy loading하는 여러 방법이 있지만, 나는 그 중에서 가장 정보가 많고 설명이 많아 친절한 lazy-sizes로 구현했다.

lazy-sizes 사용법

먼저 터미널을 열고,

npm install lazysizes --save

설치해준다.

index.js파일에 가서

import 'lazysizes';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';
import 'lazysizes/plugins/blur-up/ls.blur-up';

import 해주면 되는데 이때 원하는 스타일을 같이 import해주면 된다.

그리고 GlobalStyle.js파일로 가서

  .blur-up {
		-webkit-filter: blur(5px);
		filter: blur(5px);
		transition: filter 400ms, -webkit-filter 400ms;
	}

	.blur-up.lazyloaded {
		-webkit-filter: blur(0);
		filter: blur(0);
	}

import한 스타일 css를 붙여 넣어준다.

그리고 적용을 원하는 태그에

<Poster alt='포스터 이미지' src={data.poster_img} className='lazyload blur-up' />

className='lazyload (스타일이름)'을 넣어주면 Lazy Loading 효과를 주어 랜더링 속도를 개선시킬 수 있었다.