React] Hook : CustomHook

CustomHook

개발하다 보면 같은 로직을 작성하는 경우가 많이 생기게 됩니다.

이럴 때 반복되는 코드를 없애기 위해 직접 hook을 만들어 사용하면 도움이 될 것입니다.

 

뿐만 아니라, 로직이 너무 길거나 가독성이 떨어질 경우도 있고,

로직과 태그들 사이에 구분이 짓고 싶을 때 사용해도 아주 유용합니다.

(함수를 쪼개서 만든다고 생각하면 될 것입니다. 우리는 hook을 사용할 뿐...)

 

 

---

 

 

예

 

name이랑 email 두 개의 state를 만들었습니다.

name은 직접 만든 useInput이라는 커스텀훅을 사용하였고,

email은 컴포넌트에서 작성하였습니다.

 

로직상 두 개의 차이점이 없는 상황입니다.

만약 useInput이라는 커스텀 훅을 만들지 않았다면, email의 값을 확일 할 때 사용되는 emailChange, uesEffect에서 찍은 console.log를 state별로 구분해야 될 것입니다.

 

추가로 비밀번호, 주소 등 좀 더 다양한 input태그가 있었다면, 각각 다 만들어서 지정해 줘야 됐을 겁니다.

이렇게 반복되는 코드를 없애기 위해 useInput이라는 커스텀 훅을 만들었고, email state 또한 useInput으로 선언해 주면, 간소화시켜 개발을 할 수 있을 겁니다.

 

 

---

 

 

이처럼 반복되는 소스를 재사용하기 위해 보통 많이 사용할 것입니다.
뿐만 아니라 앞에서 적었던 대로 단순히 로직을 구분 짓기 위해서 사용하는 것도 좋은 방법이라고 생각합니다. 
(남발할 경우, 오히려 헷갈릴 수는 있으니 그건 개발자 재량 것...)