인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

강프로그래머님의 프로필 이미지

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

5.11) React Hooks

조건문, 반복문, 커스텀 훅 사용 전에 Hook 사용 시 에러 미발생

해결된 질문

작성

·

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;
image.png

 커스텀 훅 만들기 전에 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;
image.png

함수 컴포넌트 외부에서 Hook 호출 시

image.png

 

답변 2

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

네 맞습니다. ESLint나 기타 실습 환경에 따라, 눈에 띄는 오류 메세지가 나타나지 않을 수 있으나 이런 방식은 권장되지 않는, 잘못된 사용법입니다. 조건문 or 반복문 내부에서 Hook을 호출해 사용하실 경우 AI인턴의 답변대로 Hook이 정상작동 하지 않을 가능성이 생깁니다.

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 강프로그래머님.

조건문이나 반복문에서 React Hook을 사용하는 것은 일반적인 실제 사용 패턴과 일치하지 않습니다. React에서는 Hook을 항상 최상위에서 호출해야 합니다. 이는 컴포넌트가 매 렌더마다 동일한 순서로 Hook을 호출할 수 있도록 보장하기 위함입니다. 이를 어기면 동일한 Hook이 서로 다른 상태와 제대로 연결되지 않아 예기치 않은 동작이 발생할 수 있습니다.

React Hook 사용 가이드라인:

  1. Top-Level에서 사용하기: 컴포넌트 최상위 레벨에서만 Hook을 호출해야 합니다. Hook을 조건문이나 반복문 등에서 사용하면 문제가 됩니다.
  2. 함수 컴포넌트 내부에서 사용: 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가 상태 관리에 대한 확실한 예측을 할 수 있도록 도와줍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.