자바스크립트 + 리액트 디자인 패턴

310

자바스크립트 + 리액트 디자인 패턴

12.7

동적 가져오기

앞서 정적 가져오기 절에서 다룬 채팅 애플리케이션에는

UserInfo

,

ChatList

,

ChatInput

,

EmojiPicker

라는 네 가지 핵심 컴포넌트가 있었습니다. 하지만 초기 페이지 로드 시에는

UserInfo

,

ChatList

,

ChatInput

세 가지 컴포넌트만 사용되며,

EmojiPicker

는 바로 보이

지 않고 사용자가 이모지 버튼을 클릭해야만 화면에 렌더링됩니다. 따라서

EmojiPicker

모

듈이 초기 번들에 불필요하게 추가되었음을 의미하며, 이로 인해 잠재적인 로딩 시간이 증가

할 수 있는 문제점이 존재합니다.

이 문제를 해결하기 위해

EmojiPicker

컴포넌트를 동적으로 가져올 수 있습니다. 컴포넌트

를 정적으로 가져오는 대신

EmojiPicker

를 실제로 필요한 시점에 맞춰 불러오는 겁니다. 리

액트의

Suspense

기능을 사용한다면 손쉽게 동적으로 가져올 수 있습니다.

리액트에서 제공하는

Suspense

컴포넌트는 동적으로 로드되어야 할 컴포넌트를 감싸는데,

이는

EmojiPicker

모듈의 가져오기를 일시적으로 중단

Suspense

시킴으로써

App

컴포넌트가 더

빠르게 내용을 렌더링할 수 있도록 해줍니다. 사용자가 이모지를 클릭하면

EmojiPicker

컴

포넌트의 렌더링이 시작됩니다.

ChatInput

컴포넌트는

Suspense

컴포넌트를 렌더링하며,

이 컴포넌트는 지연 로딩되는 모듈인

EmojiPicker

를 받습니다.

Suspense ...