React - Hook

Hook...????

클래스 컴포넌트에서만 사용할 수 있었던 state관리와 lifedcycle 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수.

Hook의 특징

useState와 같은 use로 시작하는 내장 Hook이 있으며 컨포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(custom hook)도 가능하다.
Hook은 함수 컴포넌트에서 사용되기 위해 만들어진 것이기 때문에 클래스 컴포넌트에서는 사용할 수 없다.

Hook 사용 규칙

함수 컴포넌트 내에서 호출

Hook은 함수 컴포넌트 내부, custom Hook 내부에서만 호출 가능하다.

최상위에서 호출

Hook은 항상 함수 컴포넌트 내의 최상위에서만 호출해야한다. 최상위라는 것은 함수 컴포넌트의 첫 번째 중괄호 내부를 의미한다.
React는 Hook들이 사용된 순서에 따라 구분하기 때문에 항상 동일한 순서로 여러 개의 Hook이 호출되는 것이 보장된다.

반복문, 조건문, 중첩된 함수 내에서는 Hook을 호출하면 안 된다. Hook이 호출되지 않을 경우 Hook의 순서가 섞일 수도 있기 때문이다.