코드스플리팅

[React] React.Lazy() (Code Splitting)

Code Splitting React는 기본적으로 SPA(Single Page Application)이다. SPA (Single Page Application) 웹 사이트의 전체 페이지를 하나의 JS 파일에 담아 액션에 따라 동적으로 화면을 변경하며 표현하는 방식이다. 과거에는 한 페이지마다 크기가 작았기에 페이지 변경 시 서버에서 하나의 페이지가 담긴 html 파일을 통째로 전달해주곤 했다. 하지만, 서버의 부하, 화면 blinking 등의 이슈로 Client Side Rendering인 SPA가 등장하게 되었다. SEO (검색 엔진 최적화)의 효율이 좋지 않아 최근에는 Server Side Rendering을 고려하는 경우가 많다. SPA의 가장 큰 문제점은 모든 페이지가 하나의 JS 파일에 담겨져 ..