Suspense
비동기 api로 호출하는 데이터가 랜더링 되기 전 화면, 즉 로딩시에 보여줄 페이지를 만드는 것. fallback 에 넣은 컴포넌트가 로딩화면으로 랜더링 된다.
장점은 리액트 문서에서 말하기를 앱의 시각적인 로딩 단계를 밀접하게 통제할 수 있도록 해준다는 것. 그리고 데이터 불러오기 라이브러리들(ex.loadable)이 React에서 잘 결합되도록 해주는 것. 이라고 한다.
참고로 리액트 문서에서 Suspense는 아직 실험단계라고 한다.
Suspense는 가장 최상단에 하나만 사용해도 된다. 하위 컴포넌트들은 기본적으로 가장 최상단의 Suspense를 바라본다. 하위 항목에서 다른 fallback 로딩화면을 제공하고 싶으면 하위에서 또 한번 더 Suspense를 사용해도 괜찮다.
React.lazy
컴포넌트를 import 하는 시점을 동적으로 할 수 있도록 해주는 것. 코드 스플릿 기능.
lazy는 Suspense와 항상 같이 사용해야 한다. lazy의 상단에는 반드시 Suspense가 있어야 한다. Suspense없이 lazy만 사용했을때 500 에러를 띄운다.
loadable
코드 스플릿 하는 라이브러리 React.lazy 보다 좋은 점은 ssr 이 지원되고 import문에 `` 를 쓸 수 있는 등 장점이 많다고 한다.
Suspense, lazy 는 서버사이드 랜더링에서 사용할 수 없는데 loadable 의 이 방식 대로 하면 ssr 도 지원이 된다. 대신 웹팩 바벨등 설정을 해줘야 쓸 수 있다.
loadable 라이브러리의 lazy 에 대한 고찰
코드 스플릿 해주는건 loadable 과 같은데 lazy에 대한 설명이 너무 빈약하다...ㅠㅠ 참고로 이 lazy를 사용할때 얘도 Suspense 없으면 에러뜬다. 리액트 lazy를 그냥 따라한건가??
>> lodable 오픈소스를 뜯어 보면 lazy는 loadable에서 suspense 라는 옵션만 true 로 주고있다. lazy와 loadable은 거의 흡사하다. 리액트의 lazy를 구현했다고 문서에도 적혀있다. loadable 라이브러리의 loadable 에서는 suspense가 옵션이고 suspense fallback 써도 작동하던데 그냥 loadable이 여러모로 나은 듯하다
링크
Suspense : https://ko.reactjs.org/docs/concurrent-mode-suspense.html#what-is-suspense-exactly
React.lazy : https://ko.reactjs.org/docs/code-splitting.html#reactlazy
loadable 라이브러리가 제공하는 lazy : https://loadable-components.com/docs/api-loadable-component/#lazy
