Hook의 장점

컴포넌트로부터 상태 관련 로직을 추상화할 수 있다
이를 이용해 독립적인 재사용이 가능하다
코드의 재사용은 가독성을 높이고 유지보수를 용이하게 한다
훅은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있다
생명주기 메서드를 기반으로 쪼개는 것 보다는 훅을 통해 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다

Hook 규칙

1. 리액트 함수의 최상위에서만 호출해야 합니다.
반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다.

...
if(counter) {
    const [sample, setSample] = useState(0);
}
...

예를 들어 count가 있을 때 sample이라는 state를 사용하고 싶어서 조건문 안에 useState() hook을 불러왔다고 가정해 봅시다.(이런 식의 가정은 애초부터 틀린 가정입니다. 예시를 위해 이러한 가정을 한 것이라 이해해 주세요.) 이런 식으로 호출을 하게 되면 React의 동작 방식에 거스르기 때문에 React는 에러를 출력합니다.

컴포넌트 안에는 useState나 useEffect 같은 Hook들이 여러 번 사용될 수 있는데, React는 이 Hook을 호출되는 순서대로 저장을 해놓습니다.

그런데 조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장을 하기 어려워지고, 결국 예기치 못한 버그를 초래하게 될 수 있습니다.

2. 오직 리액트 함수 내에서만 사용되어야 합니다.
이는 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다는 의미입니다.

...
window.onload = function () {
    useEffect(() => {
        // do something...
    }, [counter]);
}
...

예를 들어 window의 요소가 모두 준비가 되면 useEffect()가 호출되었으면 좋겠다고 생각해서 함수를 작성했다고 가정해 봅시다.(이런 식의 가정은 애초부터 틀린 가정입니다. 예시를 위해 이러한 가정을 한 것이라 이해해 주세요.) 이 또한 React의 동작 방식에 위배되기 때문에 React는 에러를 출력합니다.

애초에 Hook은 React의 함수 컴포넌트 내에서 사용되도록 만들어진 메서드이기 때문에 근본적으로 일반 JavaScript 함수 내에서는 정상적으로 돌아가지 않습니다. 따라서 이 규칙 또한 반드시 준수해야 하는 규칙입니다.