Hook은 오직 React 함수 내에서만 사용(호출)되어야 한다.
→ 일반적인 js 함수에서는 호출하면 안된다.
React 함수 최상위에서 호출해야 한다.
→ 반복문, 조건문, 중첩된 함수 내에서 hook을 호출하면 안된다.
useState 나 useEffect 같은 hook 들이 여러 번 사용될 수 있는데, 리액트는 이 hook 들을 호출되는 순서대로 저장해 놓는다. (=LinkedList)
그래서 매 렌더링마다 순서대로 hook을 호출할 수 있는것이다.
그런데 만약 조건문이나 반복문안에서 hook을 사용하였다고 가정해보면, 그럼 hook이 어떤 조건에따라 실행되지 않을 수 있습니다. 그럼 렌더링 때마다 맨 처음 함수가 실행될 때 리액트가 기억해놓은 hook의 순서가 꼬여서 실행될 것이고 결국 버그를 초래할 것입니다.
그래서 항상 리액트 함수 최상위 레벨에서만 hook을 호출해야하는 이유이다.
useState를 예로 좀더 자세히 설명하자면, 여러 상태값을 사용하기 위해 useState를 여러 번 사용할 수 있다.
이렇게 생성된 여러 상태값들을 관리해주기 위해 리액트는 useState 함수 바깥에 state를 배열에 담아서 저장해 놓는다.
즉, 상태값들은 이 배열에 순서대로 저장되고, 상태가 업데이트 되었을 때, 이 상태들은 리액트 컴포넌트 바깥에 선언되어 있는 변수들이기 때문에 리렌더링 후에도 이 변수들에 접근할 수 있게된다.
생성된 상태들이 컴포넌트를 Key로 하는 배열에 순서대로 저장되있기 때문에 hook을 조건문이나 반복문, 일반 js 함수에서 사용되게 된다면, 최초에 저장되었던 순서와 다르게 실행되어 다른 상태값을 참조하게 되는 버그를 발생시킬 수가 있다.