06. Debounce, useRef

Debounce

: 사용자가 미리 결정된 시간 동안 타이핑을 멈출때까지 keyup 이벤트 처리를 지연시켜줌.
UI코드가 모든 이벤트를 처리할 필요가 없고, 서버로 전송되는 API 호출 수도 감소.

예시 코드 : 컴포넌트가 마운트 되는 시점에만 실행하게 하기위한 코드

<script>
export const useDebounce=(value,delay)=>{
	const [debounceValue, setDebounceValue]= useState(value);
    
    useEffect(()=>{
    	setDebounceValue(value)
    },delay);
    
    return ()=>{
    	clearTimeout(handler);
        };
    
    },[value,delay]);
    return debounceValue;
    
  }
  
 const debouncedSearchTerm=useDebounce(query.get("q"),500);
</script>

useRef

-ref는 불필요한 렌더링을 방지함.
-state는 값이 변경될때마다 렌더링이 되지만, ref는 ref안의 값들을 변경해도 컴포넌트가 렌더링 되지 않는다. 변경하여도 렌더링을 발생시키지 말아야하는 갑값을 다룰때 유용
-JS에서 getElementById하는 것의 기능과 동일.

ref 생성
: useRef를 이용하여 ref객체를 만들고 ,이를 특정 dom에 ref값으로 설정. ref객체의 .current값이 특정 dom을 가리킴

<script>
const ref=usesRef(); //ref생성

// ref.current사용
const listener=(event)=>{
	if(!ref.current || ref.current.contains(event.target)){
    	return;
        }
        handler(event);
    }
</script>

참고자료🚀:
https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C

따라하며 배우는 리액트 강의 자료