[React] Input Onchange 이벤트 버벅임 해결

 

다들 Input태그에 onChange 이벤트를 활용하여 개발을 진행할때 버벅이는 속도를 한번씩은 겪어보신 적이 있었을것이다. 나도 마찬가지다. 사용자입장으로 생각해보니 너무 느려서 Input전용 공통 함수를 하나 만들고 진행해보았다.  

1. input안에 onChange 이벤트를 발생시킬것이다. 기존 코드를 한번 봐보자

-- onChang 이벤트  
<input
    type="text"
    name={"eventSpeedTest"}
    value={'searchParam.eventSpeedTest'}
    className="form-control"
    autoComplete="off"
    onChange={(e) =>
      setSearchParams((prev) => ({
        ...prev,
        eventSpeedTest: e.target.value,
      }))
    }
  />

 

만약 하나의 화면에 Input이 많이 존재하지않고 setSearchParam에 담겨있는 컬럼이 많이 없다면은 onChange 이벤트를 사용해도 속도에서 크게 차이는 못느낄것이다 . 즉 그냥 사용해도 괜찮을것같다.

 

 2.우선 useRef를 사용하여 공통함수를 하나 만들었다. (onChange를 걷어내기 위함.)

// 공통 함수
import { useRef } from "react";

export type InputRefMap<T extends string> = {
  [K in T]: React.RefObject<HTMLInputElement>;
};

export default function useInputRefs<T extends string>(keys: T[]) {
  const refs = useRef<InputRefMap<T>>(
    Object.fromEntries(keys.map((key) => [key, { current: null }])) as InputRefMap<T>
  );

  const getValues = (): Record<T, string> => {
    const values = {} as Record<T, string>;
    keys.forEach((key) => {
      values[key] = refs.current[key].current?.value || "";
    });
    return values;
  };

  return { refs: refs.current, getValues };
}

 

3.공통함수를 호출한 이후 value값 대신 ref를 넣었다. 이후 속도 비교 결과 기존에 버벅이는 현상은 아예 사라졌다.

import useInputRefs from "../../../utils/useInputRefs";

  const { refs, getValues } = useInputRefs([
    "eventSpeedTest"
  ]);

const onSearchButtonClick = () => {
    // 1. 폼에서 들어온 값
    const inputValues = getValues();

    // 2. 우선 전체 merge 
    const merged = {
      ...searchParams,
      ...inputValues,
    };

    // 3.기본값 보존
    const nextParams = {
      ...merged,
    };

    setSearchParams(nextParams);
    fetchEventSpeedTest(nextParams);
  };
  
  <input
    type="text"
    name={"eventSpeedTest"}
    ref={refs["eventSpeedTest"]}
    className="form-control"
    autoComplete="off"
  />

 

참쉽죠 ,, 물론 여러가지 방법이 있을것이라고 생각합니다. 
<select> 태그가 존재할 시에는 저는 onChange이벤트를 사용하였습니다.