[react] Debounce -lodash.com 사이트 이용 방법

debounce 디바운스 

이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술

콘솔에 글자 하나칠때마다 함수 호출되는것말고 텀사이(띄어쓰기)를 그룹으로 묶어서 호출한다.

 

[사이트 이용 방법]

https://lodash.com

Lodash

 

1. 터미널에 아래와 같이 작성하여 설치한다
npm i --save lodash.debounce 

 

2. 적용시키기

-연속해서 타자칠 때는 적용되지 않다가, 잠시 쉬는 타임에 데이터가 스토리지로 전송이 된다. (실시간 반영 아닌 곳에 주로 사용)

//선언
const 변수=debounce(적용하는변수,시간);

//실행
변수();

 

▼ 적용 코드

const debounceSetItem=debounce(setItem,6000); //6초지나고 debounce되게 설정

function App() {
  const [todos,setTodos] = useState(getItem('todo') || [] )
  const [selectedTodoIndex,setSelectedTodoIndex] = useState(0);
   
  const setTodo = (newTodo) => { 
    const newTodos  = [...todos];
    newTodos[selectedTodoIndex] = newTodo  ;
    setTodos(newTodos); 
    debounceSetItem('todo',newTodos) //적용
  }