Rules of hooks

hook을 사용을 하지만 가끔씩 이상하게 사용해서 리액트가 rule에 위반한다고 할 때가 있었다.
이번에 react에서 hook의 규칙에 대해 알아보자.

1. 최상위(at the Top level)에서만 hook을 호출해야 합니다.

반복문, 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안된다.
대신 early return이 실행되기 전에 항상 React 함수의 최상위에서 hook을 호출해야 한다.

• early return : 함수 또는 반복문 등에서 끝까지 가서 return 되기 전에 if문 안에서 일찍 return 하는 것

최상위에서만 호출하면 React가 useState와 useEffect를 여러번 호출하더라도 hook의 상태를 올바르게 유지할 수 있도록 해줍니다.

2. 오직 React 함수 내에서 hook을 호출해야 합니다.

hook을 일반적인 Javascript 함수에서 호출하지 마세요.
대신 아래와 같이 호출 할 수 있습니다.

• React함수 컴포넌트에서 hook을 호출하세요
• custom hook에서 hook을 호출하세요.

React 함수 밖에서(컴포넌트 위) useState를 사용하려다가 hook rule에 위배된다고 나왔던 경험이 있는데 2번째 룰에서 위배되었던 것을 이번에 알게 되었다.

참고 문헌

• https://ko.reactjs.org/docs/hooks-rules.html
• early return