Suspense와 lazy

 

📌 Suspense

 

비동기 로딩 작업을 지원하는 React 내장 컴포넌트

 

Suspense를 사용하면 컴포넌트가 렌더링 하기 전에 다른 작업이 먼저 이루어지도록 대기한다.

 

비동기 관련 로딩상태를 처리할 때 Promise 기반으로 동작한다.

 

아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React 내장 컴포넌트

 

code spliting을 통해 필요할 때 동적으로 컴포넌트를 import하는 lazy loading 방식을 구현하는 데 사용된다.

 

💡 Code spliting

React는 SPA(Single Page Application) 특징을 가지므로, 빈번한 DOM 조작으로 인한 성능 저하가 발생할 수 있다. 따라서, 모든 컴포넌트를
한 번에 로딩하지 않고 필요할 때마다 로딩하는 방식을 채택했는데 그것이 코드 스플리팅이다.

코드에서 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩 시간을 개선하는 것을 말한다.

 

📌 lazy

 

Suspense 내에서 Code spliting 된 컴포넌트를 동적으로 불러오는 기법

 

초기에 페이지에 접속하면 웹팩으로부터 번들링된번들링 된 js 파일을 받는다. 이때 번들링 된 모든 컴포넌트가 포함되어 있다. 여기에 데이터 fetching까지 이루어진다면, 사용자가 초기에 웹페이지를 보는 시점이 매우 늦어진다.

 

lazy loading은 코드를 분할해서 모든 컴포넌트가 번들링된 파일을 받는 것이 아니라 필요할 때 동적으로 컴포넌트를 불러오는 기법이다.

 

컴포넌트를 동적으로 import 하려면 promise의 상태를 처리해야 하기 때문에 Suspense 내부에서 사용해야 한다.

 

페이지를 동적으로 import 할 때, Suspense가 이를 감지하여 fallback 컴포넌트를 대신 보여준다.

 

❓ 번들링(빌드)

 

사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위

개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링 한파일을 받아와 이를 브라우저가 실행한다.

 

🔍 목적

 

✔ 파일 크기 문제 해결

 

번들링은 압축과 개념이 비슷하다. 번들 파일은 원본 파일보다 크기가 작아지고 실행 및 로딩 속도가 빨라진다.

 

✔ 애플리케이션 임의 조작 방지

 

번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없다. 하지만 사용자가 원본 코드에 접근할 수 있다면 조작 위험이 생긴다.

 

✔ 파일 단위의 JS 모듈 관리

 

Javascript에서 변수는 기본적으로 전역 범위를 가진다.

 

변수를 중복 선언하거나 의도치 않은 값을 할당해 생기는 에러를 번들링 도구인 Webpack에서는 모듈 번들링으로 해결한다.

 

❓ 웹팩(Webpack)

 

프론트엔드 애플리케이션을 배포하기 위해 사용하는 번들링 도구, 번들러

 

javascript 애플리케이션을 위한 모듈 번들러

 

🔍 모듈 번들러(Module bundler)

 

HTML, CSS, Javascript 뿐만 아니라 애플리케이션에 필요한 이미지 파일과 기타 파일까지 자원을 각각의 모듈로 보고 이를 조합하여 하나의 묶음으로 번들링(빌드)하는 도구

 

모던 웹으로 발전하면서 HTML, CSS 등의 내용이 Javascript 안으로 들어오면서 .js 파일의 양이 절대적으로 증가했다. 또한, 세분화된 모듈 파일이 폭발적으로 증가해 웹 애플리케이션의 의존성 트리 규모도 증가했다. 그래서 javascript의 변수 스코프 문제와 웹 애플리케이션을 실행할 때 네트워크 쪽의 비용까지 신경 쓰게 되었다.

 

이러한 문제를 모듈 번들러는 하나의 시작점(ex. react app의 index.js)으로부터 의존성을 가지는 모듈을 모두 추적하여 의존성 트리를 만들고, 하나의 결과물을
만들어 내는 방식으로 해결했다.

 

References:

 

https://velog.io/@bnb8419/Suspense%EC%99%80-lazy-Loading#suspense%EB%9E%80

React Suspense와 lazy Loading

 

https://velog.io/@jwo0o0/Web-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-%EB%B2%88%EB%93%A4%EB%A7%81%EC%9D%B4%EB%9E%80-Webpack

[Web] 🗂프론트엔드에서 번들링이란? / 🛠Webpack