[React] 5. Blog v1

• 키가 입력될 때마다 useEffect 발동 : 너무 잦은 호출
• 이를 최적화하기 위한 디바운싱 (Debouncing) 적용

• rawKeyword : 검색창에 키워드를 입력할 때 이를 확인하기 위한 키워드 상태

• keyword : 실제 호출에 사용할 키워드

• useRef : 상태를 변경하지만 추가 행동을 하지 않음 → 값이 변경되어도 렌더링 X
• useRef 내부의 ref.current에 해당 상태 값 저장
• 값을 바꿔도 렌더링 X, 리렌더링이 되어도 값 그대로 유지

• _.debounce : 외부 라이브러리 lodash에서 지원하는 디바운스 함수
• 호출할 함수, 딜레이 설정

• useEffect를 2번 사용 : 취소 시, 키워드 변경 시
• 취소 시 타이머 적용 취소 → 키 연속 입력 시 타이머 갱신 용
• 키워드가 정상적으로 변경 시 새 호출
• cancelToken : axios 내부에서 사용할 수 있는 요청 취소 토큰 (≠ JWT)
• 이전 검색 요청을 버리는 용도

import React, { useEffect, useRef, useState } from "react";
import { Form, FormControl, Pagination } from "react-bootstrap";
import BoardItem from "../../components/BoardItem";
import axios from "axios";
import _ from "lodash";

const Home = () => {
  const [page, setPage] = useState(0);

  // 1) 입력 즉시 DOM 반영용
  const [rawKeyword, setRawKeyword] = useState("");

  // 2) 요청 트리거용(디바운스 후 반영)
  const [keyword, setKeyword] = useState("");

  const [model, setModel] = useState({
    totalPage: undefined,
    number: 0,
    isFirst: true,
    isLast: false,
    boards: [],
  });

  // --- 디바운스된 setter: 최초 1회 생성, 언마운트 시 cancel ---
  const debouncedSetKeyword = useRef(
    _.debounce((value) => {
      setKeyword(value); // 디바운스 후에만 서버요청 트리거 상태 변경
      setPage(0); // 새 키워드면 페이지를 0으로 리셋 (옵션)
    }, 600) // 3초가 너무 길다면 600~800ms 권장
  );

  useEffect(() => {
    return () => {
      // 컴포넌트 언마운트 시 디바운스 타이머 취소
      debouncedSetKeyword.current.cancel();
    };
  }, []);

  // --- 서버 호출: page, keyword(디바운스된 값) 변경 시에만 ---
  useEffect(() => {
    const source = axios.CancelToken.source();

    (async () => {
      try {
        const res = await axios.get("http://localhost:8080", {
          params: { page, keyword },
          cancelToken: source.token,
        });
        setModel(res.data.body);
      } catch (e) {
        if (!axios.isCancel(e)) {
          console.error(e);
        }
      }
    })();

    // 의존성 변경/언마운트 시 이전 요청 취소
    return () => source.cancel("request aborted due to new search");
  }, [page, keyword]);

  function prev() {
    setPage((p) => p - 1);
  }

  function next() {
    setPage((p) => p + 1);
  }

  // --- 입력은 즉시 rawKeyword에 반영, 서버요청은 디바운스 ---
  function changeValue(e) {
    const value = e.target.value;
    setRawKeyword(value); // 즉시 DOM 갱신
    debouncedSetKeyword.current(value); // 요청은 지연
  }

  return (
    <div>
      <Form className="d-flex mb-4" onSubmit={(e) => e.preventDefault()}>
        <FormControl
          type="search"
          placeholder="Search"
          className="me-2"
          aria-label="Search"
          value={rawKeyword} // ✅ 입력은 즉시 보이도록 rawKeyword 바인딩
          onChange={changeValue}
        />
      </Form>

      {model.boards.map((board) => (
        <BoardItem key={board.id} id={board.id} title={board.title} page={0} />
      ))}

      <br />
      <div className="d-flex justify-content-center">
        <Pagination>
          <Pagination.Item onClick={prev} disabled={model.isFirst}>
            Prev
          </Pagination.Item>
          <Pagination.Item onClick={next} disabled={model.isLast}>
            Next
          </Pagination.Item>
        </Pagination>
      </div>
    </div>
  );
};

export default Home;

• useEffect로만 구현도 가능 = setTimeout, clearTimeout으로 구현 가능

• lodash를 useEffect만 사용해서 디바운싱 구현은 어려움
• lodash의 debounce는 내부 함수에 사용할 value를 저장하고 일정 시간 후 내부 함수 호출
• 리렌더링 시 lodash가 새로 호출되어 버려짐 : 이전 요청의 함수들은 버려짐
• 검색을 하게 되면 useEffect로 인해 화면이 리렌더링 → debounce 함수 복제 → 이전 명령 삭제로 인한 검색 불가
• lodash를 쓸 때에는 리렌더링이 되어도 해당 함수의 상태를 유지할 수 있도록 useMemo 또는 useRef를 사용해야 함

import React, { useEffect, useRef, useState } from "react";
import { Form, FormControl, Pagination } from "react-bootstrap";
import BoardItem from "../../components/BoardItem";
import axios from "axios";
import _ from "lodash";

const Home = () => {
  const [page, setPage] = useState(0);

  // 1) 입력 즉시 DOM 반영용
  const [rawKeyword, setRawKeyword] = useState("");

  // 2) 요청 트리거용(디바운스 후 반영)
  const [keyword, setKeyword] = useState("");

  const [model, setModel] = useState({
    totalPage: undefined,
    number: 0,
    isFirst: true,
    isLast: false,
    boards: [],
  });

  // 🔹 rawKeyword가 바뀔 때마다 600ms 뒤에 keyword 반영 (디바운스)
  useEffect(() => {
    const t = setTimeout(() => {
      setKeyword(rawKeyword);
    }, 600);

    return () => clearTimeout(t); // 입력이 다시 들어오면 이전 타이머 취소
  }, [rawKeyword]);

  useEffect(() => {
    apiHome();
  }, [page, keyword]);

  async function apiHome() {
    let response = await axios({
      method: "get",
      url: `http://localhost:8080?page=${page}&keyword=${keyword}`,
    });

    let responseBody = response.data;
    setModel(responseBody.body);
  }

  function prev() {
    setPage((p) => p - 1);
  }

  function next() {
    setPage((p) => p + 1);
  }

  // --- 입력은 즉시 rawKeyword에 반영, 서버요청은 디바운스 ---
  function changeValue(e) {
    const value = e.target.value;
    setRawKeyword(value); // 즉시 DOM 갱신
  }

  return (
    <div>
      <Form className="d-flex mb-4" onSubmit={(e) => e.preventDefault()}>
        <FormControl
          type="search"
          placeholder="Search"
          className="me-2"
          aria-label="Search"
          value={rawKeyword} // ✅ 입력은 즉시 보이도록 rawKeyword 바인딩
          onChange={changeValue}
        />
      </Form>

      {model.boards.map((board) => (
        <BoardItem key={board.id} id={board.id} title={board.title} page={0} />
      ))}

      <br />
      <div className="d-flex justify-content-center">
        <Pagination>
          <Pagination.Item onClick={prev} disabled={model.isFirst}>
            Prev
          </Pagination.Item>
          <Pagination.Item onClick={next} disabled={model.isLast}>
            Next
          </Pagination.Item>
        </Pagination>
      </div>
    </div>
  );
};

export default Home;