시작하기

# pnpm (권장)
pnpm add @frontend-toolkit-js/hooks @frontend-toolkit-js/components
 
# npm
npm install @frontend-toolkit-js/hooks @frontend-toolkit-js/components
 
# yarn
yarn add @frontend-toolkit-js/hooks @frontend-toolkit-js/components

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

import { InViewTrigger } from '@frontend-toolkit-js/components';
 
function LazySection() {
  return (
    <InViewTrigger onInView={() => console.log('화면에 보임!')}>
      <div>내용</div>
    </InViewTrigger>
  );
}

const debouncedValue = useDebounce(searchTerm, 300);
//    ^? string - 타입 명시 불필요!