커스텀 훅 기본 형태 예제

React에서 제공하는 Hook들 보통 많이 쓰이는 useEffect, useCallback 같은 것들은 이미 리액트에서 재공해주는 훅이고,

커스컴 훅은 말그대로 use{블라블라} 형태로 내가 만들고 싶은 훅을 만드는 것이다.

 

그냥 보통 쇼핑몰 사이트만 생각했을 때, 회원가입, 로그인, 문의사항 폼이 있다고 생각해보자.

각 폼에만 해도 아이디, 이메일, 비밀번호, 내용 등의 input들이 있을 것이고 각각을 구성할 수 도 있지만,

리액트의 기본인 컴포넌트로 재사용성을 높힌 것 처럼 커스텀훅을 사용하여 공통적인  것들은 따로 분리하고 가능한 재사용할 수 있도록 하여 로직을 최소화할 수 있다는 장점이 있다.

 

내가 커스텀훅을 써본 적이 없다고 생각을 했는데, 생각보니 전에서 썼던 react-hook-form 이 이런 폼형식에 맞는 커스텀훅들로 만든 라이브러리였다.

 

아래 codesandbox에서 커스텀 훅을 만드는 방법과 훅으로 만들기 전, 커스텀 훅으로 만든 후 코드의 차이가 어떻게 되는 지 알아볼 수 있도록 예시를 만들어 보았다.