<div id="readability-page-1" class="page"><div id="post-content" itemprop="articleBody">웹 애플리케이션의 초기 로딩 속도를 개선하는 핵심 전략 중 하나는 필요한 코드만을 적절한 시점에 로드하는 것이다. Reac.lazy는 이러한 코드 분할(Code Spliiting)을 효과적으로 구현할 수 있게
도와주는 도구다. 이 글에서는 React.lazy의 동작 원리와 사용 방법을 살펴 보겠다.
<h2 id="동적-import의-이해"><a href="#%EB%8F%99%EC%A0%81-import%EC%9D%98-%EC%9D%B4%ED%95%B4" aria-label="동적 import의 이해 permalink"></a>동적 import의 이해</h2>
모듈을 동적으로 불러오는 import 함수는 프라미스를 반환하는 함수다. 이 함수는 다음과 같이 사용할 수 있다.
<div data-language="js"><pre><code>const deferedModule = import("my-module")</code></pre></div>
이 함수는 두 가지 형태의 경로를 인자로 받을 수 있다.
<ul>
<li>로컬 파일 시스템의 파일 경로</li>
<li>HTTP로 접근할 수 있는 원격 URL</li>
</ul>
웹팩 같은 번들러를 사용한다면 로컬 파일 시스템의 파일 경로를 전달해 번들러가 파일을 번들할 수 있게 도와준다. URL을 전달해 함수를 호출하면 브라우져는 HTTP 요청을 만들 것이다.
두 경우 모두 I/O 작업이나 네트워크 통신이 필요하기 때문에 비동기적으로 동작하며, 프라미스를 통해 모듈 로딩 처리를 할 수 있다.
<div data-language="js"><pre><code>deferedModule.then(module =&gt; {
 console.log("Module loaded", module)
})</code></pre></div>
이러한 import의 특징을 활용해 어플리케이션 초기 로딩에 기여하지 않는 코드는 따로 분리해 낼 수 있다. 어플리케이션이 로딩된 후 필요한 시점에 분리한 모듈을 로딩하는 방식으로 어플리케이션을 설계할 수 있다.
<h2 id="지연-로딩-구현"><a href="#%EC%A7%80%EC%97%B0-%EB%A1%9C%EB%94%A9-%EA%B5%AC%ED%98%84" aria-label="지연 로딩 구현 permalink"></a>지연 로딩 구현</h2>
리액트 컴포넌트를 이런 식으로 분리해 보면 좋겠다. 지연 로딩을 구현하기 위해 다음과 같은 방식으로 접근할 수 있다.
<ol>
<li>모듈이 로딩되기 전까지는 null을 반환</li>
<li>모듈이 로딩된 후에는 해당 컴포넌트를 렌더링</li>
</ol>
아래는 간단한 지연 로딩 구현의 예시이다.
<div data-language="js"><pre><code>let moduleId = 0
const loaded = {}

function myLazy(moduleLoader) {
 const id = moduleId++

 return MyLazyComponent(props)
 {
 const LoadedComponent = loaded[id]

 // 모듈이 로딩된 후
 if (LoadedComponent) {
 return &lt;LoadedComponent {...props} /&gt;
 }

 // 모듈이 로딩되기 전
 throw moduleLoader().then(async lazyModule =&gt; {
 await new Promise(resolve =&gt; setTimeout(resolve, 1000))
 const Component = lazyModule.default
 loaded[id] = Component
 })
 }
}</code></pre></div>
myLazy는 import로 모듈을 불러오는 함수 moduleLoader를 받을 것이다. 이 함수는 MyLazyComponent 를 반환하는데 props 인자를 받고 리액트 앨리먼트를 반환하는 리액트 컴포넌트이다.
반환할 리액트 앨리먼트를 loaded 객체에서 찾는다. 모듈을 비동기로 불러오기 때문에 이 객체에 모듈이 있을 경우만 컴포넌트를 렌더링해 결과를 반환한다.
모듈을 불러와 loaded 저장할 차례다. 리액트는 컴포넌트에서 프라미스를 던지면 이에 반응한다. 프라미스가 이행될 때까지 기다려야하는 컴포넌트로 이해하고 렌더를 멈추는 것 같다. (참고: <a href="https://dev.to/heyitsarpit/suspense-in-react-18-4ca0">Suspense in React 18</a>) 모듈이 로딩되더라도 1초간 기다리는데 그 동안은 아무것도 그리지 않는다.
프라미스가 이행되면 리액트는 MyLazyComponent가 준비된것으로 이해하고 다시 호출한다. MyLazyComponet는 laoded에 담아둔 원격 모듈을 이용해 렌더링 결과를 반환할 것이다.
이렇게 사용해 보자.
<div data-language="jsx"><pre><code>const MyModule = myLazy(() =&gt; import("./MyModule"))

function App() {
 return (
 &lt;&gt;
 &lt;h1&gt;App&lt;/h1&gt;
 &lt;MyModule /&gt;
 &lt;/&gt;
 )
}</code></pre></div>
myLazy에 모듈을 로딩하는 함수를 인자로 전달했다. 불러올 모듈 경로를 import 인자로 전달해 호출하는 함수이다. 이렇게 불러온 MyModule을 App 컴포넌트에서 렌더링했다.
<h2 id="reactsuspense의-활용"><a href="#reactsuspense%EC%9D%98-%ED%99%9C%EC%9A%A9" aria-label="reactsuspense의 활용 permalink"></a>React.Suspense의 활용</h2>
리액트의 Suspense 컴포넌트를 사용하면 지연 로딩되는 컴포넌트를 더욱 우아하게 처리할 수 있다.
<div data-language="jsx"><pre><code>function App() {
 return (
 &lt;&gt;
 &lt;h1&gt;App&lt;/h1&gt;
 &lt;React.Suspense&gt;
 &lt;MyModule /&gt;
 &lt;/React.Suspense&gt;
 &lt;/&gt;
 )
}</code></pre></div>
Suspense는 다음과 같은 특징을 가진다.
<ul>
<li>프라미스를 던지는 자식 컴포넌트를 감지</li>
<li>로딩중에는 컨텐츠를 표시하지 않음</li>
<li>프라미스가 이행되면 실제 컴포넌트를 렌더링</li>
</ul>
따라서 Suspense로 감싼 MyModule은 모듈을 불러올 동안은 아무것도 그리지 않다가 모듈을 로딩한 즉시 다시 렌더링된다. 한편 App 헤딩 엘리먼트는 이것과 무관하게 처음부터 렌더링되는 효과를 얻을 수 잇다.
Suspense를 사용하면 로딩 중에 표시할 UI를 fallback 인자로 지정할 수도 있다.
<div data-language="jsx"><pre><code>function App() {
 return (
 &lt;&gt;
 &lt;h1&gt;App&lt;/h1&gt;
 &lt;React.Suspense fallback="Loading..."&gt;
 &lt;MyModule /&gt;
 &lt;/React.Suspense&gt;
 &lt;/&gt;
 )
}</code></pre></div>
<h2 id="reactlazy"><a href="#reactlazy" aria-label="reactlazy permalink"></a>React.lazy</h2>
myLazy롤 React.lazy를 흉내내 보았다. 실제 코드를 보면 비슷한 부분이 있다.
프라미스(Thanable)를 던지는 부분:
<div data-language="js"><pre><code>function lazyInitializer(payload) {
 // ...
 throw payload._result // ()=&gt; Thanable
}</code></pre></div>
모듈 로딩하는 함수인 <code>payload._result</code> 를 던져서 컴포넌가 아직 렌더 준비가 되지 않았음을 의도한다.
로딩한 모듈의 default 값을 반환하는 부분:
<div data-language="js"><pre><code>function lazyInitialzier(payload) {
 // ...
 if (payload._status === Resolved) {
 const moduleObject = payload._result
 // ...
 return moduleObject.default
 }
}</code></pre></div>
로딩한 모듈의 default 값을 반환한다. React.lazy 함수로 로딩할 모듈은 <code>export default</code> 로 모듈을 외부 노출해야한다.
<h2 id="실제-활용-방안"><a href="#%EC%8B%A4%EC%A0%9C-%ED%99%9C%EC%9A%A9-%EB%B0%A9%EC%95%88" aria-label="실제 활용 방안 permalink"></a>실제 활용 방안</h2>
이 함수를 효과적으로 활용할 수 있는 대표적인 시나리오는 다음과 같다.
라우트 기반 코드 분할
<ul>
<li>각 라우트별로 독립적인 번들 생성</li>
<li>페이지 전환 시에만 해당 코드를 로드</li>
</ul>
서드파티 라이브러리의 지연 로딩
<ul>
<li>차트나 에디터 같은 무거운 외부 라이브러리</li>
<li>사용자 인터랙션 후에만 필요한 기능</li>
</ul>
<h2 id="결론"><a href="#%EA%B2%B0%EB%A1%A0" aria-label="결론 permalink"></a>결론</h2>
React.lazy는 웹 어프리케이션의 초기 로딩 성능을 최적화하는 도구다. 대표적으로 라우터로 분리된 컴포넌트를 지연 로딩 대상으로 처리할 수 있다. 웹팩과 함께 사용하면 더욱 강력한 코드 분할 전략을 구현할 수도 있다.
단, 무분별한 코드 분할은 오히려 성능 저하를 초리할수 있다는 점을 유념해야할 것 같다.
<h2 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h2>
<ul>
<li><a href="https://github.com/jeonghwan-kim/jeonghwan-kim.github.io-examples/tree/main/2024-12-17-react-lazy">예제 코드</a></li>
<li><a href="https://dev.to/heyitsarpit/suspense-in-react-18-4ca0">Suspense in React 18 | dev.to</a></li>
</ul></div></div>

김정환 블로그 RSS Feed

김정환

웹 애플리케이션의 초기 로딩 속도를 개선하는 핵심 전략 중 하나는 필요한 코드만을 적절한 시점에 로드하는 것이다. Reac.lazy는 이러한 코드 분할(Code Spliiting)을 효과적으로 구현할 수 있게
도와주는 도구다. 이 글에서는 React…

리액트 lazy

댓글