Hook 규칙

Hook 규칙

Hook 은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙이 있다.

1. React의 함수 내에서만 사용되어야 한다. 즉 일반적인 JavaScript 내에서는 호출하면 안된다.
2. React 함수의 최상단에서 호출해야 한다.

useState 혹은 useEffect 의 경우 React가 순서를 지정해 놓기 때문에 rendering이 발생하는 경우 React가 지정한 순서에 따라서 hook을 호출할 수 있다.

하지만 if, for 안에서 hook을 사용할 경우 순서가 엇갈림에 따라 버그를 초래할 가능성이 있기 때문에 항상 React 함수의 최상단에서 hook을 호출하도록 규칙을 정해 놓은 것이다. 이러한 규칙은 linter plugin 참고.

React 함수 내에서 Hook을 호출할 것

• React 함수 Component 내에서 Hook을 호출해야 한다.
• Custom Hook 에서 다른 Hook을 호출할 수 있다.

이러한 규칙을 지키고 있다면 Component의 모든 state 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.

React 함수의 최상단에서 Hook을 호출할 것

Component가 렌더링 될 때 동일한 순서로 Hook이 호출되는 것을 보장해야 한다. React는 Hook이 호출되는 순서에 의존하기 때문에 모든 렌더링에서 Hook의 호출 순서는 같음을 보장해야 한다. 따라서 버그의 가능성을 내포하고 있는 if, for와 같은 곳에서는 Hook을 호출하지 않도록 한다.