Import On Visibility

Import on Visibility

사용자의 상호작용 외에 초기 렌더링된 페이지에서도 보이지 않는 컴포넌트들이 있을 수 있다. 예를 들어 뷰포트 바깥에 있는 이미지를 처음부터 로드하지 않고. 사용자가 스크롤하여 보게 되었을 때 로드하는 이미지 지연로딩이 있다.

모든 이미지를 페이지의 로딩과 함께 즉시 로드하지 않기 때문에 페이지의 초기 로딩 속도를 줄일 수 있다. 이 패턴을 컴포넌트에도 적용할 수 있다. 컴포넌트가 뷰포트 안에 있는지 여부를 알아내고 필요 모듈을 동적으로 로드하기 위해 [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)를 사용하거나 react-lazyload 혹은 react-loadable-visibility같은 라이브러리를 사용할 수 있다.

사용자가 GIF 버튼을 클릭하여 EmojiPicker 가 화면에 렌더링되면 react-loadable-visibility가 EmojiPicker 엘리먼트가 화면에 그려져야 하는지를 판단한다. 렌더링 되어야 하는 경우 해당 모듈은 스피너가 보여질 동안 EmojiPicker를 동적으로 import 하고. 컴포넌트를 화면에 렌더링한다.

폴백 컴포넌트는 사용자에게 앱이 멈춘것이 아니라는 것을 인지시킨다. 사용자가 모듈이 로드되고 파싱되고 실행되기까지 기다릴 수 있게 해 주는 것이다.