✔️ lazy , Suspense 의 필요성

• React는 기본적으로 클라이언트 사이드 렌더링
  
  ▪️ 서버에서 일단 비어있는 html 파일을 받아온 다음 JS 코드를 통해서 최종 화면을 그려줌
  ▪️ 클라이어트 쪽에서 자바스크립트를 통해서 화면을 완성하기 때문에 클라이언트가 렌더링의 주체가 된다는 의미

• 너무 큰 자바스크립트 파일은 로딩이 오래걸림

• 여러가지 페이지 링크가 다 로딩 되는데 우리가 필요한 페이지는 한정적일 수 있다

• 페이지를 필요한 것만 가져오도록 최적화 필요

---

1️⃣ lazy

동적으로 컴포넌트를 불러올 수 있도록 해주는 함수
컴포넌트를 바로 불러오지 않고, 실제로 그 컴포넌트가 필요할 때 불러옴
번들 크기를 줄이고, 필요한 시점에만 해당 컴포넌트를 로드할 수 있습니다.

⚙️ 기본 사용법

// [기존]
import Main from "./Main.jsx"

// 🔮 [lazy 적용]
const Main = lazy(( ) => import("./Main.jsx"));

2️⃣ Suspense

불러온 컴포넌트를 감싸서 로딩 중 표시할 UI를 지정하는 역할
컴포넌트를 불러오는 동안
사용자에게 보여줄 임시 화면 설정
즉, 비동기적으로 로드되는 컴포넌트가 준비될 때까지 대체 UI(fallback)를 렌더링하는 기능을 제공

⚙️ 기본 사용법

<Suspense fallback={ <div> Loading... </div> } > 
  <Main />
</Suspense>

• fallback 속성에는 로딩 중에 보여줄 UI를 넣어줍니다.
• 컴포넌트가 로드될 때까지 <div> Loading... </div>을 표시합니다.

3️⃣ lazy & Suspense 예시

import { lazy, Suspense, useState } from "react";
import "./App.css";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";

// 1️⃣ lazy
// CASE : 1 [기존]
// 처음 페이지 불러올 때 모든 컴포넌트 링크가 열림
//
// import Main from "./page/Main";
// import Detail from "./page/Detail";
// import Search from "./page/Search";

// CASE : 2 [lazy 적용]
// 처음 페이지 불러올 때 첫 페이지만 소스가 불러와지고, 나머지는 직접 클릭 및 실행 시 링크가 로딩되며 소스가 생겨남
const Main = lazy(() => import("./page/Main"))
const Detail = lazy(() => import("./page/Detail"))
const Search = lazy(() => import("./page/Search"))

function App() {
  const [inputValue, setInputValue] = useState('')
  const navigate = useNavigate()
  return (
    <>
      <header>
        <h1>🦮 동물 정보 사이트 🐈</h1>
        <div className="inputSearch">
        <input value={inputValue} onChange={(e) => setInputValue(e.target.value)}/>
        <button onClick={()=> navigate(`/search?animal=${inputValue}`)}> 🔍 </button>
        </div>
      </header>
      {/* 2️⃣ Suspense 안에 포함된 컴포넌트 들을 불러올 때 화면이 로딩되기 전 뜨는 화면을 설정해줄 수 있다 */}
      <Suspense fallback={<h1> Loading ... </h1>}>
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route path="/search" element={<Search />}></Route>
      </Routes>
      </Suspense>
      <footer>all rights reserved to OZ_FE_09_박하늘</footer>
    </>
  );
}

export default App;

4️⃣ 정리

• lazy()는 동적으로 컴포넌트를 가져오는 기능
• Suspense는 로딩 중 표시할 UI를 설정하는 기능
• 함께 사용하여 코드 스플리팅과 성능 최적화를 할 수 있음
• 초기 번들 크기를 줄여 앱의 로딩 속도 향상
• 필요한 시점에만 컴포넌트를 로드하여 성능 최적화