조건문, 반복문, 커스텀 훅 사용 전에 Hook 사용 시 에러 미발생
안녕하세요 강사님
조건문, 반복문에서 또는
커스텀 훅을 사용하기 전에 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이 서로 다른 상태와 제대로 연결되지 않아 예기치 않은 동작이 발생할 수 있습니다.
React Hook 사용 가이드라인:
- Top-Level에서 사용하기: 컴포넌트 최상위 레벨에서만 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가 상태 관리에 대한 확실한 예측을 할 수 있도록 도와줍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
47
2
데이터 로딩중 화면만 계속 나와요!!
0
53
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
81
3
Date 객체에 관련하여 질문드립니다.
0
84
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
107
2
onMouseEnter 관련 문의 드립니다
0
91
3
배열의 렌더링 관련 질문 드립니다.
0
72
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
112
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
134
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
110
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
177
2
87강 필터 함수 질문
0
67
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2