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

314

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

12.7.2

상호작용 시 가져오기

채팅 애플리케이션 예시에서 사용자가 이모지를

클릭

할 때

EmojiPicker

컴포넌트를 동적으

로 가져왔습니다. 이런 유형의 동적 가져오기를 ‘상호작용 시 가져오기

Import

on

Interaction

’라고 합

니다. 사용자의 상호작용을 통해 컴포넌트의 가져오기를 실행한 것입니다.

12.7.3

화면에 보이는 순간 가져오기

사용자 상호작용 외에도, 초기 페이지 로드 시에는 보이지 않아도 되는 컴포넌트들이 종종

있습니다. 이미지를 지연 로딩하거나, 사용자가 스크롤해야만 화면에 나타나는 컴포넌트들

이 대표적인 예입니다. 컴포넌트가 사용자에게 보일 때 동적 가져오기를 실행하는 것을 ‘화면

에 보이는 순간 가져오기

import

on

Visibility

’라고 합니다.

컴포넌트가 현재 화면에 표시되는지 확인하려면

IntersectionObserver

API

를 사용하거나,

react

-

loadable

-

visibility

또는

react

-

lazyload

와 같은 라이브러리를 활용하여 애플

리케이션이 보이는지에 따라 가져오는 기능을 쉽게 추가할 수 있습니다. 이제 채팅 애플리케

이션 예시를 통해

EmojiPicker

가 화면에 보일 때 가져와지고 로드되는 방식을 살펴보겠습

니다.

import React from "react"; ...