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

315

Chapter 12_

리액트 디자인 패턴

<input type="text" placeholder="Type a message..." />

<Emoji onClick={togglePicker} />

{pickerOpen && <EmojiPicker />}

<Send />

</div>

);

};

console.log("ChatInput loading", Date.now());

export default ChatInput;

12.8

코드 스플리팅

이전 절에서는 필요할 때에만 컴포넌트를 동적으로 가져오는 방법을 살펴봤습니다. 여러 경

로

route

와 컴포넌트로 구성된 복잡한 애플리케이션에서는 적절한 시기에 정적 및 동적 임포트

가 모두 가능하도록 코드를 최적으로 스플리팅 (분할 )하고 번들링해야 합니다. 이를 위해서

는 경로 기반 분할을 사용하거나, 웹팩이나 롤업과 같은 최신 번들러를 사용하여 애플리케이

션 소스 코드를 분할하고 번들링할 수 있습니다.

12.8.1

경로 기반 분할

때로는 특정 페이지나 경로에서만 필요한 리소스가 있을 수 있습니다. 이런 경우, 경로 기반

분할

Route

-

based

Splitting

을 통해 특정 경로에 필요한 리소스만 요청할 수 있습니다.

Suspense

또

는

loadable

-

components

와

react

-

router

같은 라이브러리를 ...