- useTimeout, useTimeoutFn
- run과 clear 함수를 이용하여 useTimeoutFn, useTimeout hooks를 구현했습니다.
- useTimeoutFn의 경우 버튼을 통해 실행, 실행 멈추기 테스트가 가능합니다.
- useTimeout의 경우 컴포넌트가 렌더링 된 후 바로 실행되며 멈추기 버튼을 통해 실행을 멈출 수 있습니다.
- useLocalStorage
- localStorage의 getItem과 setItem을 이용해 useLocalStorage Hook을 구현했습니다.
- 사용자가 질문에 대한 답변 작성 중 새로고침을 할 경우 이용 가능한 Hook입니다.
- 제출 버튼을 누르기 전에는 initialValue인 '안녕하세요!'를, 제출 버튼을 누르면 localStorage에 '답변을 작성하는 중입니다'가 저장되어 화면에 렌더링됩니다.
- 새로고침 시에도 저장된 데이터가 유지됩니다.
- useForm
- useForm은 API와 동일하게 email, fullName, password를 입력 받고 각 값에 대한 validate를 수행합니다
- 값을 입력하지 않았을 때와 입력했을 때 다른 error 메세지를 띄우고, 모든 조건을 충족했을 경우 submit 이벤트가 정상적으로 실행됩니다
- useDebounce
- useTimeoutFn을 이용하여 특정 초 이내에 deps 관련 내용이 바뀔 경우, 기존에 실행되던 setTimeout이 종료된 후 다시 실행
- storybook 예시로 친구 검색 시 아래 자동 검색이 되게 구현