[리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components
IT/React 2021. 8. 23. 14:15

코드 분할이 왜 필요한지는 이전 글 참고! [리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자 breathtaking-life.tistory.com 리액트 16.6 버전 이전에는 import함수로 비동기 로딩하고, 컴포넌트를 state에 넣어서 코드 분할을 하였다. 그 이후부터는 내장 함수 React.lazy와 Suspense 컴포넌트로 코드 분할을 할 수 있다! - state를 사용한 코드 분할 (클래스형 컴포넌트) [sayHi.js] 모두 안녕하세요!! 인사를 해준다. expor..