React lazy
React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다.
먼말이냐
아래 이미지로 볼때 count를 클릭 할때마다 콘솔에 랜더링됨 이 계속 찍힐꺼다.
이말은 불필요한 렌더가 될 수 있다.
물론 생명주기 생각해서 억지로 막을 수 있겠지만 코드 길어지자나..
이때
const [count, setCount] = React.useState(() => initaialState())이렇게 콜백함수로 넣어버리면 클릭된 state, 즉 콜백함수만 작용해서
리액트스럽게 저 렌더링됨은 안찍이히게 될꺼다 이말
이걸 리액트에서 훅으로 만든것이 React lazy임
사용법
Suspense
Suspense는 코드 분할된 컴포넌트가 비동기처리시 pending일때
UI보여줄때 사용 보통 lazy랑 사용하는거 같음
먼말이냐
서버에서 데이터 받아올때 Pending일때 스피너로 로딩중임을 알려줄때
pending을 state를 사용하지 않고 UI로 보여줄 수 있음
before
부모 컴포넌트에 자식 컴포넌트 두개 있다고 했을때
부모에서 변화가 있어서 자식둘이 렌더된다고 가정해보자
그 자식 컴포넌트들은 외부 데이터를 받아오는 애들 즉 api fetch하는 애들일때
두개 중 하나라도 완료가 안되면 부모 컴포넌트는 변화된 UI를 보여주지 않을꺼임
보통 promise.all([자식1,자식2])로 두개의 비동기가 완료되었을때
각각 뿌려주는 식으로 코드를 작성했다면
after
이제는
Suspense로 해당 컴포넌트 감싸면 됨
Loadable Components
Loadable Components는 코드 분할을 편하게 하도록 도와주는 서드파티 라이브러리이다.
✨ 가장 큰 장점은 서버 사이드 렌더링을 지원한다!!
렌더링 하기 전에 필요할 때 분할된 파일을 미리 불러올 수 있는 기능도 있다.
yarn add @loadable/component요런 느낌
Suspense 컴포넌트를 빼고, fallback을 loadable에 바로 넣어주는?? 식으로 이해했다.
결과는 위와 동일하다
-
React.lazy와 Suspense를 사용하면 state를 선언하지 않고 간편하게 코드 분할을 할 수 있다!!
-
React.lazy : 컴포넌트를 렌더링 하는 시점에 비동기적으로 로딩할 수 있게 해주는 유틸 함수
Suspense : 리액트 내장 컴포넌트. 코드 분할된 컴포넌트를 로딩하도록 할 수 있고, 로딩이 끝나지 않았을 때 보여줄 UI를 설정할 수 있다. -
서버 사이드 렌더링을 한다면 Loadable Components, 아니면 React.lazy, Suspense를 사용하자!
