Hooks๊ฐœ์š”

Hooks

ํƒ€์ž… ์•ˆ์ „ํ•˜๊ณ  ์„ ์–ธ์ ์ธ React ํ›… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

ํฌํ•จ๋œ ํ›…

์ƒํƒœ ๊ด€๋ฆฌ

  • useDebounce - ๋””๋ฐ”์šด์Šค๋œ ๊ฐ’ ๋ฐ˜ํ™˜
  • useDebouncedCallback - ๋””๋ฐ”์šด์Šค๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜

์œ ํ‹ธ๋ฆฌํ‹ฐ

  • useCalendar - ๋‹ฌ๋ ฅ ๋ฐ์ดํ„ฐ ๋ฐ ๋„ค๋น„๊ฒŒ์ด์…˜
  • useIsMounted - SSR ์•ˆ์ „ํ•œ ๋งˆ์šดํŠธ ๊ฐ์ง€

ํŠน์ง•

  • โœ… TypeScript strict mode 100%
  • โœ… ์ œ๋„ค๋ฆญ์œผ๋กœ ํƒ€์ž… ์ž๋™ ์ถ”๋ก 
  • โœ… Tree-shaking ์ง€์›
  • โœ… ์ž๋™ cleanup (๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜ ๋ฐฉ์ง€)

์„ค์น˜

npm install @frontend-toolkit-js/hooks
# or
pnpm add @frontend-toolkit-js/hooks

๋น ๋ฅธ ์‹œ์ž‘

import { useDebounce, useCalendar } from '@frontend-toolkit-js/hooks';
 
function SearchInput() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 300);
 
  useEffect(() => {
    fetchResults(debouncedSearch);
  }, [debouncedSearch]);
 
  return <input value={search} onChange={e => setSearch(e.target.value)} />;
}