부트캠프 68일차 (React.lazy(), Suspense)

오늘의 생각

 

지난 금요일에 일어 오늘도 개념 위주의 학습을 진행했다.

 

리액트 번들링 과정에서 보다 효율적인 번들링과 성능을 위해 코드 분할법을 배웠는데, 생각보다 쉽지 않았다. 

 

늘 그렇듯 개념 자체는 잘 이해가 됐지만, 막상 실습에 적용시킬 때는 어려움이 있었다. 

 

최근 컨디션도 난조라 공부가 더 힘들었던 것 같다. 

 

그래도 Custom Hook은 매우 흥미로웠고, 잘 활용해서 좋은 코드를 작성하고 싶다고 생각했다.

 

---

오늘의 키워드

코드 분할, Static Import, Dynamic Import, Reacy.lazy(), React.suspense, fallback

 

---

오늘의 학습내용

• 코드 분할의 핵심 아이디어와 장점
• 정적 불러오기 (Static Import)와 동적 불러오기(Dynamic Import)의 차이점
• React.lazy() 사용법과 React.suspense와의 관계
• React.suspense의 역할과 기능, fallback prop 사용법

 

---

어려웠던 keyword / 활용한 질문

 

Q. React는 어떤 방식으로 코드 분할을 하나요?

 

A. 리액트에서는 동적 불러오기를 통해 코드를 분할하여 사용합니다. 동적 불러오기는 코드 파일의 가장 최상위에서 import 지시자를 통해 라이브러리 및 파일을 불러오지 않고, 코드의 중간에 import 지시자를 통해 라이브러리에서 필요한 부분만을 불러올 수 있습니다. 이 때, then 함수를 사용해 필요한 코드만 가져올 수 있고, 가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 합니다. 동적 불러오기 방식을 사용하면 번들링 시 분할된 코드를 지연 로딩시키거나 요청 시에 로딩해 초기 렌더링 시간을 단축시킬 수 있습니다.