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)} />;
}