ღ22일차 TIL, Debounce, Throttle 그리고 useCallback

 연관검색어표시 등 수많은 요청들을 모두 다 보내면 요청수를 낭비하게 되고 서버에도 무리가 가므로 이 요청들을 적절히 조절해 줄 방법이 필요하다. 해서 아래와 같은 방식을 사용하여 해결한다.
(무한스크롤 방식에도 쓴다고 한다. 진도 나간 후에 다시 언급 해 보려 한다.)

둘 모두 onChange를 예로 들어보면 onChange자체가 작동하는 것을 막는게 아니라 onChange가 일어나고 나서 발생하는 콜백의 실행을 효과적으로 막아준다.

 1. Debounce

-이벤트가 일어나면 일정시간을 기다렸다가 이벤트를 수행하며, 일정 시간 내 같은 이벤트가 또 들어오면 이전 요청은 취소한다.

-> 사용자가 작성을 멈춘 후 일정시간 후에 작동한다.

 2. throttle

-일정 시간동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행시켜준다.

-> 사용자가 작성을 멈추는 것과는 상관 없이 일정 시간을 간격으로 실행된다.

 3. useCallback

  하지만 리액트에서는 state에 변화가 있을 시 그대로 리렌더링이 된다. onChange는 계속해서 변화를 줘버리기 때문에 계속 리렌더링이 일어나고 이 때, 모든 함수가 초기화 되기 때문에 위 두가지 방법이 정상 동작하지 않게 되어버린다.

 그렇기 때문에 useCallback이라는 React hook을 사용해줘야한다. (지정한 함수를 메모리에 저장해 두고 조건에따라 초기화 하는 기능) useEffect와 사용법이 거의 비슷하다.
첫 번째 인자에는 함수를, 두 번째 인자에는 array로 초기화 조건을 넣으면 된다.

아래는 사용 예시 코드!

import React from "react";
import _ from "lodash";

const Search = () =>{

    const [text, setText] = React.useState("")

    const debounce = _.debounce((e)=>{
        console.log(e.target.value);
    },1000);

    const throttle = _.throttle((e) => {
        console.log(e.target.value);
    }, 1000);


    const keyPress = React.useCallback(debounce,[]);

    const onChange = (e)=>{
        setText(e.target.value);
        keyPress(e);
    }

   

    return(
        <div>
            <input type = "text" onChange={onChange} value={text}/>
        </div>
    )
}

export default Search;

항해 18일차,

 심화주차에 들어오니 좀 더 많이 노력해야겠다는 생각이 든다.
조금 더 어려운 내용이지만 활용하다보면 친해질 수 있을거라 믿는 중!