[공식 문서 정리] Hook 규칙

https://ko.reactjs.org/docs/hooks-rules.html

Hook의 규칙 – React

* 공식 문서를 정리한 글입니다.

1. 최상위(at the Top Level)에서만 Hook을 호출해야 한다.

예시)

import React, { useEffect } from 'react';
import './App.css';

function App() {
  function aa(){
    console.log('dd')
    const [count, setCount] = React.useState(0);
  }
  return (
    <div className="App">
    </div>
  );
}

export default App;

결과 :

2. 오직 React 함수 내에서 Hook을 호출해야한다.

예시)

import React, { useEffect } from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

function aa(){
  console.log('dd')
  const [count, setCount] = React.useState(0);
}

결과 :

 

만약 위 두가지를 지키지 않으면 useEffect의 순서가 바뀌어 실행되어 오류가 발생할 수 있다.