[TIL - 2022.9.30] Dynamic import, React.lazy, Suspense

Dynamic import

이전 글 code spliting에 관해서도 짧게 썼지만,

React 같은 SPA에서는 모든 컴포넌트를 한번에 불러오고 그로 인해 사용하지 않는 컴포넌트도

불러오기 때문에 비효율적이다.

그래서 로딩 컴포넌트 같은 것들은 React.lazy를 통해 렌더링을 일정 시간동안 못하게 막을 수 있다.

React.lazy, Suspense

React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, Suspense 컴포넌트의 하위에서 렌더링을 해야 합니다.

fallback은 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 React Element를 받아들인다.

    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>

React Hooks 적용 과제

평소에도 느껴온거긴 하지만 컴포넌트화를 잘하는 게 진짜 중요한 거 같다.
사실 Custom Hook을 그렇게 많이 사용해 본 적도 없는지라 어떤 걸 컴포넌트화 시켜야 하는지 좀 어려웠다.
좀 과장하자면 인증,보안 다음으로 조금 어려운 정도...? 아무튼 훈련이 필요하다.
나중에 프로젝트에 적용할려면...