왜 커스텀 훅을 쓸까

 왜 Custom Hook을 사용해 비지니스 로직을 분리해야 할까?

프로그래밍에서 가장 중요한 것 중 하나가 중복의 제거이다. 반복되는 상태 관련 로직을 분리하여 재사용 하기위해 사용하였다. 

Hook 이전에는 고차 컴포넌트와 render props를 활용해여 이를 구현하였다 

위 두 개념을 활용한 코드가 container presenter 패턴이다. 

 

Container 컴포넌트에서는 로직을 작성하고 이를 props로 하위 컴포넌트에 내려준다.

상위 Wrapper가 많아진다면 Wrapper hell이 발생될 우려가 있고 반면

Custom Hook 을 활용한다면 사용하는 각 컴포넌트에 독립적으로 작성할 수 있다.

 

즉 Custom Hook은 거창한게 아니라 Hook API를 사용하여 재사용 가능한 코드를 작성하면 그것을 custom hook이라고 한다.

 

그럼 Custom Hook을 사용함으로써 얻을 수 있는 장점은 다음과 같다.

1. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.
2. 코드 양이 적지만 명료함을 잃지 않는다. (useSomething )
3. 상태관리 로직의 재활용이 가능하다.

Hooks의 규칙

명명 : useSomething

조건: 내부에 하나 이상의 Hook 포함

 

커스텀 훅을 사용하면 상태 자체가 아닌 상태 저장 논리를 공유할 수 있다. 

 

 

 

https://legacy.reactjs.org/docs/hooks-rules.html

Rules of Hooks – React

https://react.dev/learn/reusing-logic-with-custom-hooks

Reusing Logic with Custom Hooks – React