React Hook의 사용 규칙에 대해 설명하세요.

React Hook

React Hook : 함수 컴포넌트에서 상태값 사용 및 다른 React의 기능을 사용할 수 있게 하는 매서드이다. React 16.8에 추가 되었다.
Hook 사용 규칙
1. 리액트 함수의 최상위에서만 호출해야 한다.
  1. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook 호출은 금지
  2. 컴포넌트 안에는 useState 나 useEffect 같은 Hook이 여러번 사용될 수 있는데 React는 Hook을 호출되는 순서대로 저장해 놓는다.
  3. 아래와 같이 사용하면 호출되는 순서대로 저장하기 어려워지기 때문에 예기치 못한 버그를 초래하게 된다.
```
...
if(counter) {
    const [sample, setSample] = useState(0);
}
...
//Compiled with problems: ERROR
```
2. 오직 리액트 함수 내에서만 사용되어야 한다.
  1. 일반 JavaScript 함수 안에서 호출하면 안된다.
```
...
window.onload = function () {
    useEffect(() => {
        // do something...
    }, [counter]);
}
...
//Compiled with problems: ERROR
```

단문 요약

<aside> 📌 리액트 Hook은 함수 컴포넌트에서 다양한 리액트의 기능을 편리하게 사용할 수 있도록 등장한 매서드이다.

이에 오직 리액트 함수 내에서만 사용되어야 하며, 함수의 최상위에서만 호출해야 한다.

</aside>