React setTimeOut

£€€.T.$·2024년 9월 10일
import { useEffect, useRef, useState } from 'react';
import { Input } from 'antd';
export const InputField = ({ dataSetIndex, rowIndex, cell_id, defaultValue, onChangeCell, pageMode }) => {
  const [value, setValue] = useState();
  const init = useRef();

  const delayTimeout = useRef(null);

  useEffect(() => {
    if (defaultValue !== init.current) {
      setValue(defaultValue);
    }
  }, [defaultValue]);

  useEffect(() => {
    if (value) {
      // 이전 타이머가 있으면 취소
      if (delayTimeout.current) {
        clearTimeout(delayTimeout.current);
      }

      // 새로운 타이머 설정 (0.2초 딜레이)
      delayTimeout.current = setTimeout(() => {
        typeof onChangeCell === 'function' && onChangeCell(dataSetIndex, rowIndex, cell_id, value);
      }, 200); // 200ms 딜레이
    }
  }, [value]);

  const onChange = (e) => {
    init.current = e.target.value;
    setValue(e.target.value);
  };

  return <Input onChange={onChange} value={value} disabled={pageMode === 'V'} />;
};
profile
Be {Nice} Be {Kind}

0개의 댓글