Custom Hooks (useDebounce, useRef)

Debounce

  Debounce function은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킵니다. Debounce function을 사용하면, 검색어 입력 시 모든 문자에 대한 이벤트 처리를 일정 시간의 delay을 적용하여 서버로 전송되는 API 호출 수도 줄이고 성능도 향상시킬 수 있습니다.

 

useDebounce Hooks

import { useState, useEffect } from 'react'

export const useDebounce = (value, delay) => {
  // State and setters for debounced value.
  const [debounceValue, setDebounceValue] = useState(value)
  
  useEffect(
    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {
        setDebouncedValue(value)
      }, delay)
      
      // Cancel the timeout if value changes (also on delay change or unmount)
      return () => {
        clearTimeout(handler)
      }
    },
    [value, delay] // Only re-call effect if value or delay changes
  )
  
  return debouncedValue
}

 

Ref

  useRef란 특정 DOM을 선택할 때 사용하는 React Hooks 입니다(Javascript의 getElementById, querySelector 같은 Selector 함수). React에서 DOM 선택 시 클래스 컴포넌트는 React.createRef, 함수형 컴포넌트에서는 useRef를 사용합니다.

// Class Component
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

// Function Component
function MyComponent() {
  const myRef = useRef(null);
  
  return (
    <div ref={myRef} />
  );
}

 

useRef 사용법

  useRef()를 이용해 Ref 객체를 만들고, 이 객체를 특정 DOM에 ref 값으로 설정합니다. Ref 객체의 .current 값이 특정 DOM을 가리키게 됩니다.

// DOM에 ref 값으로 설정
<div className="modal" ref={ref}>
</div>

// ref 값 사용
const listener = (event) => {
  // 클릭한 곳이 modal 안인지 확인
  if(!ref.current || ref.current.contains(event.target))
    return;
  }
};

 

swiper 모듈을 이용한 터치 슬라이드 구현

• https://swiperjs.com/react#usage

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z