Home Debounce, MUI 사용법
Post
Cancel

Debounce, MUI 사용법

Debounce

  • 연속으로 발생하는 이벤트를 제어하기 위해서 사용함.
  • 이번 프로젝트에서 onChange로 검색 창을 구현하는데 실시간으로 변하는 값의 최적화 때문에 사용.
  • useDebounce라는 커스텀 훅을 만들어서 값이 입력된 후 일정 시간이 지났을 때 처리하는 방식으로 만들 수 있음.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
typeScript
import { useEffect, useState } from 'react'

export function useDebounce<T>(value: T, delay?: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

MUI 사용법

  • mui를 import해서 사용
  • styled component 처럼 커스텀해서 사용할 수 있음
  • 커스텀할 때 모양은 styled 컴포넌트랑 조금 다른 데 아래와 같음
1
2
3
4
5
6
7
import { styled } from '@mui/material/styles';
import { InputBase } from '@mui/material';

export const SearchBar = styled(InputBase)`
  width: 100%;
  color: #252525;
`;
This post is licensed under CC BY 4.0 by the author.