“Uncaught Error: Rendered fewer hooks than expected”
만약 React Hooks를 사용할 때 “Uncaught Error: Rendered fewer hooks than expected” 에러 메시지를 만나면 걱정하지 마세요 – 혼자가 아닙니다. 많은 개발자들이 이 문제에 직면했으며, 이 글에서는 이 오류의 원인과 해결 방법을 제공하겠습니다.
문제
이 오류는 주로 React Hooks를 사용할 때 발생하며, 예상보다 적은 수의 훅을 호출하는 경우에 발생합니다. 주어진 예제에서는 나이 선택기 값이 16보다 작은 값으로 변경되면, 운전 면허증 필드 없이 폼을 렌더링하므로 오류가 발생합니다. 오류 메시지는 이 문제를 일으키는 의도치 않은 조기 리턴문이 있을 수 있다고 암시합니다. 더 깊게 코드를 살펴보고 어떤 일이 일어나고 있는지 알아봅시다.
const [name, setName] = useState('Mary');
const [age, setAge] = useState(16);
if (age < 16) {
return (
<div>
Name: <input value={name} onChange={(e) => setName(e.target.value)} />
<br />
Age: <input
value={age}
type="number"
onChange={(e) => setAge(+e.target.value)}
/>
</div>
);
}
const [license, setLicense] = useState('A123456');
return (
<div>
Name: <input value={name} onChange={(e) => setName(e.target.value)} />
<br />
Age: <input
value={age}
type="number"
onChange={(e) => setAge(+e.target.value)}
/>
<br />
Driver License: <input value={license} onChange={(e) => setLicense(e.target.value)} />
</div>
);
해결책
에러 메시지는 훅을 조건부로 호출하거나 중첩 함수에서 호출해서는 안 된다고 나타냅니다. 이 경우, 운전 면허증 필드에 대한 useState 훅이 if 조건 안에 래핑되어 있어 React 문서에서 언급된 규칙을 위반합니다.
이 문제를 해결하기 위해 코드를 재구성하여 모든 훅이 조건 없이 그리고 컴포넌트의 최상위 수준에서 호출되도록 해야 합니다. 운전 면허증 필드에 대한 useState 훅을 함수의 맨 위로 이동시켜, if 조건에 관계없이 항상 호출되도록 할 수 있습니다.
const { useState } = React;
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(16);
const [license, setLicense] = useState('A123456');
return (
<div>
Name: <input value={name} onChange={(e) => setName(e.target.value)} />
<br />
Age: <input
value={age}
type="number"
onChange={(e) => setAge(+e.target.value)}
/>
{age >= 16 && (
<span>
<br />
Driver License: <input value={license} onChange={(e) => setLicense(e.target.value)} />
</span>
)}
</div>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
결론
“Uncaught Error: Rendered fewer hooks than expected” 오류는 훅을 조건부로 호출하거나 중첩 함수에서 의도하지 않게 호출하여 발생할 수 있습니다. 훅을 사용하는 데 있어 React에서 설정한 규칙을 따르는 것이 중요하며, 각 렌더링에서 동일한 순서로 호출되도록 해야 합니다. useState 훅을 if 조건문 밖으로 이동시킴으로써, 오류를 해결하고 컴포넌트의 원하는 기능을 얻을 수 있습니다.
다음에 이 오류를 마주하게 되면, 조건부나 중첩된 훅 호출로 인한 코드를 확인하고 필요한 조정을 하십시오. React Hooks로 즐거운 코딩하세요!
참고 자료 :
같은 카테고리의 다른 글 보기 :
