React 심화-2

Chpater2-3. Custom Hooks
  1.custom hook을 어느 때에 사용하는지 이해합니다.
  2.custom hook의 작성 규칙과 작성 방법에 대해 이해합니다.
Chapter3. React의 주목해야 할 기능
  3.React가 버전 18로 업데이트 되면서 어떤 점이 바뀌었는지 이해한다.
Chapter3-1. 코드 분할(Code Spliting)
  4.번들링한 앱들이 코드 분할이 필요한 이유에 대해 이해합니다.
  5.React는 어떤 방식으로 코드 분할을 하는지 이해합니다.
Chapter3-2. React.lazy()와 Suspencse
  6.React.lazy()의 사용법과 어느 때에 사용하는지 이해합니다.
  7.React.Suspense의 사용법과 어느 때에 사용하는지 이해합니다.

1.반복되는 로직을 재사용하고 싶은 경우 사용할 수 있다. 예를 들면 url fetch, 상태변경 등에 사용한다.

2.중복되는 로직을 분리하여 use를 붙인 함수를 만들며 아래와 같은 규칙을 지켜야한다.

  1.Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙여야한다.(없는경우 일반컴포넌트취급)
  2.프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다.
  3.Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야한다.

3.ReactDOM.render를 지원하지 않고 대신 createRoot API를 지원한다. 덕분에 Suspense기능을 이용해 독립적 렌더링이 가능하다.

4.번들링한 앱에 코드분할을 적용하면 필요한 부분만 먼저 불러서 사용할 수 있기 때문에 획기적으로 빨라질 수 있다.

5.원래는 모든 컴포넌트를 불러오지만 코드분할을 사용할 경우 요청받은 컴포넌트만 import하는 방식으로 진행된다.

6,7.lazy와 Suspense는 사실 같이 사용해야 한다. lazy는 import할 필요가 없지만 Suspense는 import가 필요하며 특정 컴포넌트가 필요한 경우 lazy에 감싸진 컴포넌트를 요청한다.

import { Suspense, lazy } from 'react';  //Suspense, lazy import하기
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));  // lasy로 분기 감싸주기
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}> //Suspense로 lazy를 사용한 컴포넌트 감싸기
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

전반적으로 뭘 하고 싶은지는 이해할 수 있지만 Custom Hook을 사용하는 법에 대해서는 아직 정확하게 모르겠다.

확실히 리액트의 기술들은 체계적이라 이해하기 더 쉬운 것 같다.