[React] Customhook

customhook → 동일한 관심사의 코드끼리 분리하기위해 사용

한번에 한가지 걱정만 하도록 단위를 잘게 나눈것이다. 우리의 코드가 단위별로 하나의 관심사만 갖도록 하고, 그 관심사에 대해서만 동작하도록 만든다는 뜻이다.
그렇게 되면 어떤 문제가 생겼을때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게되고, 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결 할 수 있게된다.

즉, 쉽게말해

• 한번에 한가지만 걱정해도 괜찮도록 -> 관심사의 분리
• Loose Coupling -> 낮은 결합도, 각각의 코드가 서로 얽혀있지 않고 독립적으로 잘 분리되어 있다.
• High Coupling -> 높은 응집도, 유사한 내용끼리 비슷한 위치에 잘 모여 있음

관심사의 분리에는 여러 장점이 있다.

• 코드가 더욱 명료해진다 : 자신이 어떤 일을 하고, 어떤 목적을 가지고 설계한 코드인지 보다 더 잘 드러나게 된다.
• 코드 재사용성이 올라간다 : 여러 역할이 엉켜있는 코드보다, 역할별로 잘 분리되어 있는 코드를 재사용 하기가 쉽다.
• 유지보수가 용이하다 : 변경사항이 발생했을때 해당 관심사에 연관된 코드만 수정하면 된다.
• 테스트 코드를 작성하기 쉽다 : 얽혀있는 로직보다 분리되어 있는 로직에 대한 테스트가 보다 더 간단하다.

---

View와 Logic의 분리

Custom Hook

Custom Hook은 이름이 use로 시작하는 자바스크립트 함수이다.
Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 분리하여 사용 가능하다.
또한 로직을 독립적인 함수로 분리함으로서 하나의 로직을 여러곳에서 반복적으로 재사용할 수 있게 된다.

Custom Hook의 이름은 use로 시작되어야 하나요?

React에서 Hook의 동작을 처리하는 내부적인 규칙과도 관련이 되어있고, 공식적인 컨벤션이기 때문에 사용해야한다.

Hook 안에서 다른 Hook을 호출할 수 있나요?

Hook은 State, Effect를 포함할 수 있는 자바스크립트 함수이고, 또 다른 Hook 역시 동일하게 State,Effect를 포함하고 있는 자바스크립트 함수이기 때문에 Hook과 Hook이 중첩 호출되는건 자연스러운것이다.

같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하나요?

두 CustomHook은 서로 호출되는 위치와 타이밍이 다르며, 애초에 서로 다른 스코프(유효범위)를 생성하기 때문에 컴포넌트를 여러번 호출하는것 처럼 완전히 독립적이다.