리액트 : 훅의 규칙

 

훅은 두 가지 지켜야 할 규칙이 있다. 첫 번째는 훅은 무조건 최상위 레벨에서만 호츨해야 한다.

두 번째는 리액트 함수 컴포넌트에서만 호출해야 한다.

여기에 대해서 자세히 알아보자

 

1. 최상위 레벨이서만 호출

이 규칙은 React가 훅 호출 순서를 기반으로 상태와 이펙트를 관리하기 때문이다.

반복문, 조건믄, 중첩된 함수 안에서 훅을 호출하면 렌더링 순서가 변할 가능성이 생기기 때문에 React의 내부 상태 관리가 꼬일 수 있다.

 

잘못된 예시

if (condition) {
    const [state, setState] = useState(0); // 조건문 내부에서 훅 호출 X
}

 

옳은 예시

const [state, setState] = useState(0); // 최상위 레벨
if (condition) {
    // 훅이 아닌 다른 로직 실행
}

 

 

2. 리액트 컴포넌트 또는 커스텀 훅에서만 호출

훅은 React의 렌더링과 연관된 함수에서만 호출해야 한다. 일반적인 자바스크립트 함수에서 호출하면 React의 상태 관리와 렌더링 사이클을 제대로 연결할 수 없게 된다.

 

잘못된 예시

function regularFunction() {
    const [state, setState] = useState(0); // 일반 함수에서 훅 호출 X
}

 

옳은 예시

function CustomHookExample() {
    const [state, setState] = useState(0); // 컴포넌트 안에서 호출
    return <div>{state}</div>;
}

 

이 두 가지 규칙을 따르면서 React 컴포넌트를 작성하면 상태와 이펙트 관리를 안전하고 예측 가능하게 할 수 있다.