React.lazy랑 @loadable Component 차이 ?

 

 

제로초님 강의를 보면서 @loadable을 사용해보면서 처음 사용해봤는데, 내가 내 플젝에 썻었던 React.lazy랑 suspense를 이용한 코드 스플리팅과 달랐고, 뭐가 다른지 몰라서 궁금해서 찾아보았습니다.

 

 

            

https://www.geeksforgeeks.org/what-are-the-differences-between-react-lazy-and-loadable-components/

 

What are the differences between React.lazy and @loadable/components ? - GeeksforGeeks

 

 

Before discussing the difference between React.lazy and @loadable/components, let’s talk about what are they and why we need them. Both React.lazy and @loadable/components are mainly being used for the process of Code-Splitting. 

일단 둘을 의논하기 전에, 그 두개가 뭔지, 왜 필요한지에 대해 이야기해보자. React.lazy와 @loadable/components는 주로 코드 스플리팅 과정에 사용됩니다.

 

Code-Splitting: Code-Splitting is an optimization technique supported by bundlers like Webpack, Rollup, and Browserify (via factor-bundle) which allows us to split our code into multiple bundles or chunks that can be dynamically loaded at runtime on-demand or in parallel.

코드 스플리팅: 코드 스플리팅은 우리의 코드를 여러개의 번들들로나 청크들로 나눠서 런타임중 온디멘드 혹은 병렬적으로 동적으로 불러올 수 있게끔해주는 Rollup, Browserify, Webpack 같은 번틀러에 의해 지원되는 최적화 기술입니다. 

 

It’s an efficient way to reduce your application bundle size because we are just “lazy-loading” the things that are currently needed by the user. Although we have not reduced the overall amount of code in our app this way, we have avoided loading the code that the user may never need. Which in turn reduces the amount of code needed during the initial load and improves the overall loading time of your application dramatically.

당신의 애플리케이션 번들 사이즈를 줄이는 것에 효율적인 방법입니다. 왜냐하면 사용자가 어떤 것을 필요로 할때 우리는 단지 그것을 "레이지-로딩"만하기 때문입니다. 또한 우리는 사용자가 필요로 하지않는 코드를 가져오는 것을 피하려고했지, 우리의 앱의 전체적인 코드를 줄이지 않았습니다. 따라서 초기 로드때의 필요로하는 코드 양이 줄고, 당신의 애플리케이션의 전반적인 로딩 시간은 동적으로 개선됩니다.

 

React implement Code-Splitting: React supports code splitting out of the box with React.lazy since version 16.6.0. It has been a common practice since then,  to split our components in a React application. However only splitting is not enough, it must be able to wait for the component to be loaded (while showing a fallback UI during loading) and also handle any potential errors. That’s why we need to use Suspense and Error Boundaries with it.

리액틔 코드 스플리팅 구현: 리액트는 16버전부터 React.lazy를 자체적으로 지원하기 시작했습니다. 리액트 어플리케이션에서 컴포넌트를 나누는 것은 그간 흔했습니다. 그런데 단지 컴포넌트를 나누는 걸로는 충분지 못했죠, 컴포넌트가 가져와질때까지 기다릴 수 있어야했고(로딩동안 fallback UI를 보여주는 등), 또한 발생 가능한 에러도 핸들링해줘야 했습니다.  그래서 우리는 Suspense와 Error Boundaries를 같이 사용해야만 합니다.

 

 

 

As we can see from the above example, React.lazy takes a function that is calling a dynamic import() and returns a Promise which resolves to a module with a default export containing a React component. The lazy component is then rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.  An Error Boundary is also used to handle any errors that may be caused due to a network issue or similar reason. 

위에 예시를 통해 React.lazy는 동적 import()를 호출하는 함수를 갖고있고, default export된 리액트 컴포넌트를 담고있는 모듈을 Resolve하는 프로미스를 반환합니다. lazy 컴포넌트는 그 다음에 Suspense 컴포넌트 내부를 리렌더가 되고, lazy 컴포넌트가 로드되길 기다리는 동안 fallback 컨텐츠( 로딩 표시기 )를 표시할 수 있도록 합니다. 에러 바운다리 또한 네트워크 이슈나 비슷한 모종의 이유인 에러들을 핸들링하기 위해 사용됩니다. 

 

 

@loadable/component: Although React.lazy with Suspense is the recommended solution for Code Splitting, it has some limitations.  React.lazy and Suspense are not yet available for Server-Side Rendering. So if you want to do Code-Splitting in a server-rendered app, that’s when @loadable/component comes into play.

@loadabl/component: React.lazy와 Suspense는 코드 스플리팅을 위해 권장되는 솔루션이긴 하지만 몇가지 제약사항이 있다. React.lazy와 Suspense는  서버사이드 렌더링이 아직 불가능하다. 그래서 만약 서버 렌더 앱에서 코드 스플리팅을 하고싶다면, @loadable/component를 사용해야할 때다.

 

 

---

 

 

 

SSR: @loadable/component provides a complete solution to make Server Side Rendering possible, whereas React.lazy is not an option when it comes to Server Side Rendering. Because Suspense is not available in Server-Side and React.lazy can only work with Suspense.

SSR: React.lazy는 서버사이드 렌더링일때, 고려사항이 아니므로 @loadable/component는 SSR이 가능하게하는 딱 맞는 해결책을 제공한다. 왜냐하면 Suspense는 서버사이드에서 사용 불가능하고, React.lazy는 Suspense와 함께 사용되어야만 한다.

 

 

Suspense: Although Suspense is supported by both by @loadable/component and React.lazy, the difference between them is @loadable/component can also be used without Suspense.

Suspense: Suspense는 두가지 모두에 지원이 되지만, @loadable/component 는 Suspense없이 사용될 수 있수 있다는 차이가 있다. 

 

 

 

Library splitting: @loadable/component supports library splitting using render props, which is not possible with React.lazy.

Library splitting: @loadable/component는 React.lazy에서 불가능한, Library Splitting을 render props를 사용해 지원합니다. 

 

 

 

Full dynamic import: Webpack supports full dynamic imports or aggressive code splitting. You can use them to create a reusable Loadable Component by passing a dynamic value to the dynamic import() function.

Full dynamic import: 웹팩은 full dynamic imports 혹은 aggressive 코드 스플리팅을 지원합니다. 당신은 재사용 가능한 Loadable Component를 만들고 dynamic import 함수에 dyname value를 넘겨서 사용하실 수 있습니다.