웹의 성능을 높이기 위해서는 여러가지 기법을 사용할 수 있습니다.
그 중 대표적인 code splitting은 말 그대로 코드를 쪼개서 해당 부분(컴포넌트)가 꼭 필요하여 사용자 눈앞에 렌더링 되어야 할 때에만 렌더링 해주는 겁니다.
예를 들어 사용자가 홈 페이지에 들어가서 다른 활동을 할 때, 굳이 렌더링 되지 않아도 될 페이지인 로그인 페이지, 회원가입 페이지와 같이 지금 필요하지 않는 페이지들이 있습니다.
그리고 로그인을 하러 로그인 페이지로 접속할 때, 회원가입을 하러 회원가입 페이지에 접속할 때에 이 페이지들에 대한 컴포넌트들이 렌더링 되어야 하죠.
만약 지금 필요하지 않는 페이지들이 모두 렌더링된다면 웹 페이지의 로딩속도가 느려지게 되는 슬픈 결과가 도래하게 되겠죠,,
이렇게 유용한 code splitting을 아주 간편하게 React에서 접할 수 있습니다.
바로 @loadable/component입니다.
원래 React에서는 자체적으로 Lazy(필요할 때 불러옴)와 Suspense(불러올 떄 까지 다른 컴포넌트를 렌더링)등 code splitting 을 제공하고 있습니다만 SSR(Server Side Rendering)까지 커버가 되지 않아 페이스북 팀(React 개발 팀)에서도 사용방법이 거의 유사한 @loadable/component를 추천한다고 합니다.
사용 방법은 매우 간편합니다.
리액트에서 다른 컴포넌트 파일을 import 할 때, 몇개의 키워드만 같이 써주면 됩니다.
import loadable from '@loadable/component';
const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));이게 끝입니다!
너무 간편하고 편리하네요.
추가적으로 Suspense처럼 해당 컴포넌트가 불러질 때 까지 로딩화면? 같은 것을 보여줄 수도 있다고 합니다.
import loadable from '@loadable/component';
const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));
...
<Login fallback={<div>로그인 불러오는 중...</div>} />
...참조 : https://medium.com/greendatakr/loadable-components-881e936aa8fa
