React의 lazy와 Suspense를 이해하기 위해 쓰는 글
리액트에서 제공하는 기술 중에는 lazy가 있다.
이 lazy란 어떤 걸 구현하게 해주는 기술일까?
Lazy Loading(레이지 로딩)이란
필요할 때만 컴포넌트, 이미지, 데이터 같은 리소스들을 로드하여 초기 로딩 속도를 개선해 성능 최적화하는 기술이다.
처음에 필요한 부분만 로드하고, 요청이 들어왔을 때 로드를 하는 것!
React를 이용해 SPA(single page application)을 만들 때, 빌드 과정을 거치면 모든 컴포넌트들을 묶기에 파일 크기가 크다.
작은 규모의 프로젝트를 만들 때는 상관이 없겠지만, 수 많은 컴포넌트들을 갖고 있는 프로젝트라면 그 규모 역시나 엄청날 것이다.
브라우저의 로딩을 위해 이 큰 규모의 js파일을 넘기게 되면, 브라우저는 모든 페이지를 위한 js파일의 로딩을 시작한다.
이걸 모두 로드하기 위해서는 꽤 오랜 시간이 걸릴 것이고, 이 지연 시간 발생을 막기 위해 도입할 수 있는 것 중 하나가 레이지 로딩(lazy loading)이다!
레이지 로딩을 적용하면, 각 요청하는 화면 또는 페이지의 청크 파일만을 로드하기 때문에 사용자는 더 빨리 화면을 볼 수 있게 된다.
이 레이지 로딩은 대개 페이지 전환 할 때 많이 사용한다고 한다.
BrowserRouter에 적용할 수 있다고 하는데 아래에 함께 설명하겠다!
리액트의 lazy는 suspense와 같이 사용하게 되는데, 이 Suspense란 무엇일까?
Suspense란?
컴포넌트의 렌더링을 지연시키는 기능으로, 비동기 데이터를 처리하거나 코드 스플리팅(code splitting)을 구현할 때 사용된다고 한다.
이는 로딩 상태를 UI로 표현할 수 있도록 돕는 컴포넌트이다.
코드 스플리팅은 React의 lazy와 함께 사용하여 필요한 컴포넌트들을 비동기적으로 로드한다.
이 Suspense는 단독으로 사용하는 것이 불가하다(이것만으로는 비동기 데이터를 처리할 수 없음)
비동기 작업에서 에러 발생 시, 애플리케이션이 중단될 수 있기에 ErrorBoundary를 함께 사용하는 것이 좋다.
이제 lazy와 suspense를 사용해, 각 페이지에 레이지 로딩을 구현하는 예시 코드를 확인해보자
위의 코드에서 확인할 수 있듯이 Suspense와 lazy를 react에서 먼저 import를 해준다
그 다음, lazy loading이 될 페이지들을 lazy를 활용해 적용을 해준다.
Routes에 레이지 로드될 페이지 컴포넌트들을 넣어준 뒤, 그 Routes 상단에 Suspense 컴포넌트로 감싸준다.
Suspense의 prop인 fallback은 로딩 중일 때 보여줄 로딩 컴포넌트를 넣어주면 된다.
여기서 드는 궁금증은, 리액트 쿼리를 사용하고 있을 때는 어떻게 적용이 되는 걸까? 이다.
리액트 쿼리에서는 isLoading을 제공하고 있고, 난 그거에 따른 UI를 띄우고 있는데 suspense를 사용하면 isLoading을 사용하지 않아도 되지 않을까?
React Query를 사용할 때 Suspense가 사용되는 예시 코드를 보자!
index.js에서 QueryClientProvider에 넣어줄 client를 정의할 때, suspense라는 옵션을 true로 활성화 해주면 된다.
아까 Suspense를 설명할 때, Error Boundary와 함께 사용하는 것이 좋다고 했는데 어떻게 적용할 수 있는지 확인해보자.
이렇게 Suspense 컴포넌트 상위에 ErrorBoundary 컴포넌트로 감싸주면 되는데 이 prop은 FallBackComponent로 에러 발생시 보여줄 컴포넌트를 넣어주면 된다!
이렇게 리액트의 lazy와 Suspense를 사용하여 레이지 로딩을 구현하는 법과, React Query를 사용할 때 Suspense를 사용하는 법까지 확인해봤다!
이제 현재 구현 중인 프로젝트에 적용하기 전에 Lighthouse로 테스트 해본 후 레이지 로딩을 적용해볼 예정이다 :)
