Hooks 사용 규칙

1. 훅은 오직 리액트 함수 내에서만 사용되어야 한다. 일반적인 js 함수에서는 호출하면 안된다.

2. 리액트 함수 최상위에서 호출해야 한다.  -> 반복문, 조건문, 중첩된 함수 내에서 hook을 호출하면 안된다.

 

useState 나 useEffect 같은 훅들이 여러 번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해 놓는다.(=LinkedList) 그래서 매 렌더링마다 순서대로 훅을 호출할 수 있는것이다.

 

근데 만약 조건문이나 반복문안에서 훅을 썻다고 해보자, 그럼 훅이 어떤 조건에따라 실행되지 않을 수 있다.

그럼 렌더링 때마다 맨처음 함수가 실행될때 리액트가 기억해놓은 훅의 호출 순서가 꼬여서 실행될 것이고 결국 버그를 초래할 것이다.

이게 항상 리액트 함수 최상위 레벨에서만 훅을 호출해야하는 이유이다.

 

useState를 예로 좀더 자세히 설명하자면,

여러 상태값을 사용하기 위해 useState를 여러 번 사용할 수있다. 이렇게 생성된 여러 상태값들을 관리해주기 위해 리액트는 useState함수 바깥에 state를 배열에 담아서 저장해놓는다.

즉, 상태값들은 이 배열에 순서대로 저장되고, 상태가 업뎃됬을때, 이 상태들은 리액트 컴포넌트 바깥에 선언되어 있는 변수들이기 때문에 업뎃후에도 이 변수들에 접근할 수 있게된다.

생성된 상태들이 컴포넌트를 키로 하는 배열에 순서대로 저장되있기 때문에 훅을 조건문이나 반복문, 일반 js 함수에서 사용되게 된다면, 최초에 저장되었던 순서와 다르게

실행되어 다른 상태값을 참조하게 되는 버그를 발생시킬 수 있다.

 

 

Hooks 동작 원리 참고사이트 : https://yeoulcoding.tistory.com/149?category=806488

[React] 클로저와 useState Hooks