📈 과도한 이벤트 핸들러 호출: 디바운스/쓰로틀링의 부재

Why Wrong?

How to Fix?

import React, { useState, useEffect } from 'react';

function SearchInput() {
  const [searchText, setSearchText] = useState('');
  const [results, setResults] = useState([]);

  // 문제점: input 값이 변경될 때마다(글자 하나하나 입력 시) API 호출
  // 사용자가 'hello'를 입력하면 'h', 'he', 'hel', 'hell', 'hello' 총 5번 호출 발생
  const fetchSearchResults = async (query) => {
    if (query.length < 2) {
      setResults([]);
      return;
    }
    console.log(`API 호출: ${query}`);
    // 실제 API 호출 로직 (예시)
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    setResults(data);
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setSearchText(value);
    fetchSearchResults(value); // 문제점: 매 입력마다 호출
  };

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={handleChange}
        placeholder="검색어를 입력하세요"
      />
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchInput;
```

```jsx
import React, { useEffect, useState } from 'react';

function ScrollTracker() {
  const [scrollPos, setScrollPos] = useState(0);

  // 문제점: 스크롤 시마다 이벤트가 발생하고, 이에 따라 상태 업데이트 및 리렌더링이 과도하게 발생
  const handleScroll = () => {
    setScrollPos(window.scrollY);
    // 스크롤 위치에 따라 추가 로직 (예: 특정 스크롤 위치에서 UI 변경 등)
    console.log('Scroll position:', window.scrollY);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div style={{ height: '200vh', paddingTop: '50px' }}>
      <h1>스크롤 테스트</h1>
      <p>현재 스크롤 위치: {scrollPos}</p>
      <div style={{ height: '100vh', background: 'lightgray' }}>
        스크롤하여 이 영역을 지나가세요.
      </div>
    </div>
  );
}

export default ScrollTracker;

import React, { useState, useEffect, useCallback, useRef } from 'react';
import debounce from 'lodash.debounce'; // 또는 직접 구현한 debounce 함수

function SearchInputOptimized() {
  const [searchText, setSearchText] = useState('');
  const [results, setResults] = useState([]);

  const fetchSearchResults = async (query) => {
    if (query.length < 2) {
      setResults([]);
      return;
    }
    console.log(`API 호출: ${query}`);
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    setResults(data);
  };

  // useRef를 사용하여 debounce 함수를 컴포넌트 생애주기 동안 유지
  // useEffect 밖에서 직접 debounce를 호출하면 렌더링 시마다 새로운 함수가 생성되어 debounce가 제대로 동작하지 않을 수 있음
  const debouncedFetchResults = useRef(
    debounce((query) => fetchSearchResults(query), 500)
  ).current;

  // 컴포넌트 언마운트 시 debounce 타이머 클리어
  useEffect(() => {
    return () => {
      debouncedFetchResults.cancel(); // Lodash debounce의 cancel 메서드
    };
  }, [debouncedFetchResults]);

  const handleChange = (e) => {
    const value = e.target.value;
    setSearchText(value);
    debouncedFetchResults(value); // 디바운스된 함수 호출
  };

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={handleChange}
        placeholder="검색어를 입력하세요 (500ms 이후 검색)"
      />
      <ul>
        {results.map((item, index) => (
          <li key={item.id || index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchInputOptimized;
```

```jsx
import React, { useEffect, useState, useRef } from 'react';
import throttle from 'lodash.throttle'; // 또는 직접 구현한 throttle 함수

function ScrollTrackerOptimized() {
  const [scrollPos, setScrollPos] = useState(0);

  const handleScroll = () => {
    setScrollPos(window.scrollY);
    console.log('Scroll position:', window.scrollY);
  };

  // useRef를 사용하여 throttle 함수를 컴포넌트 생애주기 동안 유지
  const throttledHandleScroll = useRef(
    throttle(() => handleScroll(), 200)
  ).current; // 200ms마다 최대 1번 실행

  useEffect(() => {
    window.addEventListener('scroll', throttledHandleScroll);
    return () => {
      window.removeEventListener('scroll', throttledHandleScroll);
      throttledHandleScroll.cancel(); // Lodash throttle의 cancel 메서드
    };
  }, [throttledHandleScroll]);

  return (
    <div style={{ height: '200vh', paddingTop: '50px' }}>
      <h1>스크롤 테스트 (최적화됨)</h1>
      <p>현재 스크롤 위치: {scrollPos}</p>
      <div style={{ height: '100vh', background: 'lightgray' }}>
        스크롤하여 이 영역을 지나가세요.
      </div>
    </div>
  );
}

export default ScrollTrackerOptimized;

You Might Also Like