React 심화2 Custom Hooks React.lazy()

Custom Hooks

여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다

Custom Hook 규칙
1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙입니다.
2. 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킵니다.
3. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 합니다. 즉 return 하는 값은 조건부여서는 안 됩니다.

이렇게 만들어진 Custom Hook은 Hook 내부에 useState와 같은 React 내장 Hook을 사용하여 작성할 수 있습니다

Custom Hook을 한번에 이해할 수 있는 유튜브 링크를 첨부한다.

https://www.youtube.com/watch?v=B70lI2PvRnA&ab_channel=%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88

React.lazy()

React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링할 수 있습니다. React는 React.lazy를 통해 컴포넌트를 동적으로 import를 할 수 있기 때문에 이를 사용하면 초기 렌더링 지연시간을 어느정도 줄일 수 있게 됩니다.

import Component from './Component'; // 평소에 쓰는 import문

// React.lazy로 dynamic import를 감싼다
const Component = React.lazy(() => import('./Component'));

React.Suspense

Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 됩니다. Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능입니다.

// suspense 기능을 사용하기 위해서는 import 해와야 합니다.
import { Suspense } from 'react';

 //Suspense로 로딩이 나올 화면을 감싸준다.
// 만약 로딩이 걸린다면 fallback 안쪽에 <div>Loading...</div> 을 실행시킨다.
  <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
		<AnotherComponent />
  </Suspense>

앱에 코드 분할을 도입할 곳을 결정하는 것은 사실 까다롭기 때문에, 중간에 적용시키는 것보다는 웹 페이지를 불러오고 진입하는 단계인 Route에 이 두 기능을 적용시키는 것이 좋습니다.