1. 트리 구조 특징
   • 탐색하는 속도가 빠르지만, 변경 및 업데이트 속도는 비교적 느립니다.

2. Custom Hook (React)
   • 장점
     1. 상태관리 로직의 재활용
     2. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직 구현
     3. 함수형으로 작성하기 때문에 보다 명료합니다.

   • 명명 규칙
     1. 커스텀 훅을 만들때 use 를 맨 앞에 붙여야합니다.

3. React.lazy()
   • 컴포넌트를 동적으로 import 할 수 있기 대문에 초기 렌더링 지연시간을 줄일 수 있습니다.
   • 단독으로 쓸 수 없고 React.suspense 컴포넌트의 하위에서 렌더링 해야합니다.
   • 예시
     const Component = React.lazy(() => import('./Component'));

4. React.Suspense
   • 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능입니다.
   • 예시 (React.lazy() + React.Suspense)

   import { Suspense, lazy } from 'react';
   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   
   const Home = lazy(() => import('./routes/Home'));
   const About = lazy(() => import('./routes/About'));
   
   const App = () => {
     <Router>
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Suspense>
     </Router>
   };