React lazy loading, debounce

lazy loading

React.lazy 는 코드분할을 하게 해줍니다.
코드분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다.
앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.

App.js

import ImgWrapper from "./components/ImgWrapper";

function App() {
  return (
    <div>
      <ImgWrapper />
    </div>
  );
}

export default App;

ImgWrapper.jsx

import React from "react";
import { images } from "../images";
import ImgItem from "./ImgItem";

const ImgWrapper = () => {
  return (
    <>
      {images.map((image, index) => (
        <ImgItem key={index} src={image.src} />
      ))}
    </>
  );
};

export default ImgWrapper;

ImgItem.jsx

import React, { lazy, Suspense } from "react";

// import Image from "./Img";
const Image = lazy(() => import("./Img"));

const ImgItem = ({ src }) => {
  return (
    <div>
      <Suspense fallback={<div>Loading....</div>}>
        <Image src={src} />
      </Suspense>
    </div>
  );
};

export default ImgItem;

lazy로 선언된 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 합니다! Suspense 는 lazy컴포넌트가 로드될 동안 로딩 화면과 같은 예비 컨텐츠를 fallback prop을 통해 보여줄 수 있습니다. 또한 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다.

Img.jsx

import React from "react";

export default function Img({ src }) {
  return <img src={src} alt="" />;
}

실행 결과는 Loading... 문구가 뜨며 사진이 순서대로 로딩되는 것을 볼 수 있습니다.

debounce

-특정 이벤트가 발생할때 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기위해 사용되는 함수
-input box에서 검색어를 입력할때마다 서버에서 연관된 검색어 정보를 가져와 보여주는 기능을 구현할때 주로 사용합니다.
-마지막 이벤트가 호출된 이후에 일정시간이 지난 후에 함수를 지연호출 시키는 역할을 합니다.

검색할 때, 검색어를 입력하고 잠깐 후에 관련 연관어가 뜨는 것을 경험한 적이 있을거에요. 만약 ㅇ,,아,,안,,,녀,,녕,, ..... 이렇게 value가 하나하나 바뀔 때마다 API를 호출한다면 어떻게 될까요? 서버와 클라이언트에 굉장한 부담이 됩니다. 이런 이벤트가 발생할 때 과도한 비즈니스 로직이 수행되지 않도록 방지하기 위해 Debounce를 사용합니다.