[React Basic] Hooks 사용 규칙

게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive

🛼 훅은 무조건 최상위 레벨에서만 호출한다.

리액트 함수 컴포넌트의 최상위 레벨을 의미한다.

따라서 반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안된다.

훅은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.
그래야 리액트가 다수의 useState, useEffect 훅의 호출에서 컴포넌트의 state의 올바르게 관리할 수 있게 된다.

function MyComponent(props){
	const [name, setName] = useState('joah');
  
  if(name !== ''){
  	useEffect(()=>{...});
  }
}

위 코드에서 name !=="" 라는 조건문의 값이 참인 경우에만 useEffect를 호출하도록 되어있다.

이런 경우 중간에 name값이 빈 문자열이 되면 useEffect 훅이 호출되지 않는다.

🚫 결과적으로 렌더링할 때마다 훅이 같은 순서대로 호출되는 것이 아니라 조건문의 결과에 따라 호출되는 훅이 달라지므로 잘못된 코드이다.

훅은 반드시 최상위 레벨에서만 호출해야한다.

🛼 리액트 함수 컴포넌트에서만 훅을 호출해야 한다

일반적인 자바스크립트 함수에서 훅을 호출하면 안된다.
훅은 리액트 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 훅에서만 호출할 수 있다.