customhook → 동일한 관심사의 코드끼리 분리하기위해 사용
한번에 한가지 걱정만 하도록 단위를 잘게 나눈것이다. 우리의 코드가 단위별로 하나의 관심사만 갖도록 하고, 그 관심사에 대해서만 동작하도록 만든다는 뜻이다.
그렇게 되면 어떤 문제가 생겼을때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게되고, 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결 할 수 있게된다.
View와 Logic의 분리
Custom Hook은 이름이 use로 시작하는 자바스크립트 함수이다.
Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 분리하여 사용 가능하다.
또한 로직을 독립적인 함수로 분리함으로서 하나의 로직을 여러곳에서 반복적으로 재사용할 수 있게 된다.
React에서 Hook의 동작을 처리하는 내부적인 규칙과도 관련이 되어있고, 공식적인 컨벤션이기 때문에 사용해야한다.
Hook은 State, Effect를 포함할 수 있는 자바스크립트 함수이고, 또 다른 Hook 역시 동일하게 State,Effect를 포함하고 있는 자바스크립트 함수이기 때문에 Hook과 Hook이 중첩 호출되는건 자연스러운것이다.
두 CustomHook은 서로 호출되는 위치와 타이밍이 다르며, 애초에 서로 다른 스코프(유효범위)를 생성하기 때문에 컴포넌트를 여러번 호출하는것 처럼 완전히 독립적이다.