해결된 질문
작성
·
118
·
수정됨
0
안녕하세요 강사님
조건문, 반복문에서 또는
커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는
함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요?
조건문, 반복만에서 Hook 호출 시
import { useState } from "react";
const HookExam = () => {
//const state = useState();
if (true) {
const state = useState();
console.log(state);
}
for (let i=0; i<1; i++) {
const state = useState();
console.log(state);
}
return <div>HookExam</div>
};
export default HookExam;
커스텀 훅 만들기 전에 Hook 호출 시
import { useState } from "react";
function getInput() {
const [input, setInput] = useState("");
const onChange = (e) => {
setInput(e.target.value);
console.log(e.target.value);
};
return [input, onChange];
}
const HookExam = () => {
const [input, onChange] = getInput();
return (
<div>
<input value={input} onChange={onChange}/>
</div>
);
};
export default HookExam;
함수 컴포넌트 외부에서 Hook 호출 시
답변 2
1
안녕하세요 이정환입니다.
네 맞습니다. ESLint나 기타 실습 환경에 따라, 눈에 띄는 오류 메세지가 나타나지 않을 수 있으나 이런 방식은 권장되지 않는, 잘못된 사용법입니다. 조건문 or 반복문 내부에서 Hook을 호출해 사용하실 경우 AI인턴의 답변대로 Hook이 정상작동 하지 않을 가능성이 생깁니다.
0
안녕하세요, 인프런 AI 인턴입니다. 강프로그래머님.
조건문이나 반복문에서 React Hook을 사용하는 것은 일반적인 실제 사용 패턴과 일치하지 않습니다. React에서는 Hook을 항상 최상위에서 호출해야 합니다. 이는 컴포넌트가 매 렌더마다 동일한 순서로 Hook을 호출할 수 있도록 보장하기 위함입니다. 이를 어기면 동일한 Hook이 서로 다른 상태와 제대로 연결되지 않아 예기치 않은 동작이 발생할 수 있습니다.
따라서 아래 코드는 권장되지 않는 방식입니다:
if (true) {
const state = useState();
console.log(state);
}
for (let i = 0; i < 1; i++) {
const state = useState();
console.log(state);
}
에러 없이 동작하는 것처럼 보일 수 있지만, 이는 특정 상황에 따라 나타날 수 있는 잠재적 오류를 내포하고 있음을 의미합니다. 예를 들어, 조건문이 변경되거나 반복 횟수가 변경되는 등의 상황이 있을 때 오류가 나타날 수 있습니다.
이를 방지하기 위해서는 항상 다음과 같이 최상위에서 Hook을 선언해야 합니다:
const [state, setState] = useState();
관련 링크: Invalid hook call warning - React documentation
위 가이드라인을 유지하면서 코드를 작성하면 React가 상태 관리에 대한 확실한 예측을 할 수 있도록 도와줍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.