[React] - Hook

Hook

Hook 은 클래스 컴포넌트에서만 사용할 수 있었던 state(상태) 관리와 lifecycle 관리 기능을 함수 컴포넌트에서도 사용 할 수 있도록 연동 (hook in) 해주는 함수를 의미한다. 이러한 hook 들의 모음을 Hooks 라고 한다.

React 는 useState 와 같은 내장 hook 을 몇 가지 제공하고 있으며, 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는것 (custom hook) 도 가능 하다. Hook은 클래스 컴포넌트 안에서는 동작하지 않으며 오로지 함수 컴포넌트 내에서만 사용해야 한다.

사용 규칙

hook 을 호출할 수 있는 곳은 다음 두가지 경우가 있다.

1. 함수 컴포넌트 내부 
2. custom Hook 내부 

이 두가지 경우를 제외한 곳에서는 호출할 수 없다. 클래스 컴포넌트의 메서드 뿐만 아니라 일반 javascript 함수에서도 사용할 수 없다.

Hook 은 항상 함수 컴포넌트 내의 최상위 (at the top level) 에서만 호출해야 한다. 이러한 규칠을 따르다면 해당 컴포넌트가 랜더링 될 때마다 항상 동일한 순서로 여러 개의 hook 이 호출되는 것을 보장할 수 있다 . react 가 여러 hook 들을 구분할 수 있는 유일한 정보는 hook 이 사용된 순서이기 때문이다.

반복문 , 조건문 , 중첩된 함수 내에서는 hook을 호출하면 안된다. 
특정 조건에 부합하지 않는 경우 Hook을 호출하지 않게된다
그렇다면 hook 이 사용된 순서가 섞이게 된다. 

정리

• Hook은 클래스 컴포넌트에서만 사용할 수 있었던 state(상태) 관리와 lifecycle 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in) 해주는 함수를 의미한다.
• Hook 사용규칙
  - 함수 컴포넌트 내부와 커스텀 훅 내부에서 호출
  • 최상위에서 호출