처음 만난 리액트 문서
7.7 Hooks의 규칙
훅은 단순한 자바스크립트 함수이지만 두 가지 지켜야 할 규칙이 있습니다. 먼저 첫 번째 규칙은 훅은 무조건 최상위 레벨(Top Level)에서만 호출해야 한다는 것입니다. 여기서 최상위 레벨의 의미는 리액트 함수 컴포넌트의 최상위 레벨을 의미합니다. 그래서 반복문이나 조건문, 또는 중첩된 함수들 안에서 훅을 호출하면 안된다는 뜻입니다. 이 규칙에 따라서, 훅들은 컴포넌트가 렌더링 될 때마다 매번 같은 순서대로 호출되어야 합니다. 그래야 리액트가 다수의 useState()훅과 useEffect()훅의 호출에서 컴포넌트의 state를 올바르게 관리할 수 있게 됩니다. 아래 코드를 한 번 보도록 하겠습니다.
function MyComponent(props) {
const [name, setName] = useState('Inje');
if (name !== '') {
useEffect(() => {
...
});
}
...
}
위 코드에서는 name !== ''라는 조건문의 값이 참인 경우에만 useEffect()훅을 호출하도록 되어 있습니다. 이렇게 하면 중간에 name의 값이 빈 문자열(empty string)이 되는 경우 useEffect()훅이 호출되지 않게 됩니다. 결과적으로 렌더링 할 때마다 훅이 같은 순서대로 호출되는 것이 아니라, 조건문의 결과에 따라 호출되는 훅이 달라지게 되므로 잘못된 코드입니다. 훅은 꼭 최상위 레벨에서만 호출해야 한다는 점을 기억하세요.
그리고 훅이 지켜야 할 두 번째 규칙은 리액트 함수 컴포넌트에서만 훅을 호출해야 한다는 것입니다. 그렇기 때문에 일반적인 자바스크립트 함수에서 훅을 호출하면 안됩니다. 훅은 리액트 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 훅(Custom Hook)에서만 호출할 수 있습니다. 이 규칙에 따라서, 리액트 컴포넌트에 있는 state와 관련된 모든 로직은 소스 코드를 통해 명확하게 확인이 가능해야 합니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page