[TIL] Day65 #Custom Hooks #React.lazy() #React.Suspense

2022.07.28(Thurs)

[TIL] Day65
[SEB FE] Day66

☑️ Custom Hooks

: 반복되는 로직을 함수로 뽑아내어 재사용 가능!

• 상태관리 로직 재활용 가능
• 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직 구현 가능
• 함수형으로 작성하므로 보다 명료!

📎Custom Hooks 정의 규칙

• 함수 이름 앞에 use 붙이기
• 프로젝트 내의 hooks 폴더에 위치 시키기
• 함수는 조건부 함수가 ❌ ⇒ return하는 값은 조건부 ❌

✋ Hook 내부에 useState와 같은 React 내장 Hook 사용 가능!
✋ 같은 Custom Hook 사용했더라도 같은 state를 공유하는건 아님 (로직만 공유!)

// Custom Hook Example1
// 여러 url을 fetch할 때 사용할 수 있는 useFetch Hook
const useFetch = (initialUrl: string) => {
  const [url, setUrl] = useState(initialUrl);
  const [value, setValue] = useState("");

  const fetchData = () => axios.get(url).then(({ data }) => setValue(data));

  useEffect(() => {
    fetchData();
  }, [url]);

  return [value];
};

export default useFetch;

// Custom Hook Example2
// 여러 input의 상태 변경에 사용되는 useInputs Hooks
import { useState, useCallback } from "react";

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);

  const onChange = useCallback((e) => {
    const { name, value } = e.target;
    setForm((form) => ({ ...form, [name]: value }));
  }, []);

  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
}

export default useInputs;

---

☑️ 코드 분할 (Code Spliting)

: 런타임시 여러 번들을 동적으로 만들고 불러오는 것

👉 지금 당장 필요한 코드가 아니면 따로 분리시키고, 나중에 필요할 때 불러와서 사용 가능
⇒ 페이지 로딩 속도 개선!

🤔 어느 페이지에서 코드 실행이 느려졌는지 파악해서 번들을 나눈 뒤 지금 필요한 코드만 불러오면 어떨까나?
👉 번들이 거대해지는 것을 방지하기 위한 Good 해결 방법: 번들을 물리적으로 나누는 것 !!

✨ Third Party 라이브러리

: 개인 개발자 / 프로젝트 팀 / 업체 등에서 개발하는 라이브러리로, 제3자 라이브러리
👎 다양한 메소드 제공 → 코드 양 ⬆️, 번들리시 많은 공간 차지

// loash: 배열, 숫자, 객체, 문자열 사용시 반복 작업을 할 때 사용하기 좋은 라이브러리

// loash 라이브러리 전체를 불러와서 사용 -> 비효율적!
import _ from 'lodash';

_.find([]);

// loash 메소드 중 하나만 불러와서 사용 -> 앱 성능에 더 good!
import find from 'lodash/find';

find([]);

📎 Dynamic Import

: 구문 분석 / 컴파일해야 하는 스크립트 양 최소화를 위해 지원

• then()를 사용해 필요한 코드만 가져옴
• 가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 함

// Dynamic Import Example

form.addEventListener('submit', e => {
	e.preventDefault();
	import('library.moduleA')
		.then(module => module.default)
		.then(someFunction())
		.catch(handleError());
	});

const someFunction = () => {
	// use moduleA here!!
}

↔️ Static Import
: 코드 파일 최상위에 import를 통해 사용하고자 하는 라이브러리 / 파일을 불러오는 방법

✋ React는 SPA이므로 한번에 사용하지 않는 컴포넌트까지 불러오는 단점 존재

---

☑️ React.lazy() & Suspense

📎 React.lazy()

: dynamic import를 사용하여 컴포넌트 렌더링 가능 ⇒ 초기 렌더링 지연 시간 어느정도 단축 가능

import Component from './Component';

const Component = React.lazy(() => import('./Component'));

✋ React.lazy로 감싼 컴포넌트는 단독 사용 불가 → React.suspense 컴포넌트 하위에서 렌더링해야 함

📎 React.Suspense

: 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고,
  로딩 완료시 렌더링이 준비된 컴포넌트를 보여줌

import { Suspense } from "react";

const OtherComponent = React.lazy(() => import("./OtherComponent"));
const AnotherComponent = React.lazy(() => import("./AnotherComponent"));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
        <AnotherComponent />
      </Suspense>
    </div>
  );
}

• fallback prop: 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 Element를 받아들임

✋ Suspense 컴포넌트 하나로 여러 개 lazy 컴포넌트 보여줄 수 있음

✨ React.lazy & Suspense를 통한 코드 분할을 중간에 적용시키는 것보다 Route에 적용시키는 것이 좋음!

// Router가 분기되는 컴포넌트에서 React.lazy를 사용하여 import
// Route 컴포넌트들을 Suspense로 감싼 후, 로딩 화면 컴포넌트를 fallback 속성으로 설정

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>;
};

👍 초기 렌더링 시간 ⬇️
👎 페이지 이동 과정마다 로딩 화면이 보여짐