D-57

🔍 Hook이란?

Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해주는 기능이다. 이는 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편하게 해주는 메서드를 의미한다. Hook은 class가 아닌 함함수로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않는다.

📌 Hook 사용 규칙

1. 리액트 함수의 최상위에서만 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서 Hook을 실행할 경우 동작하지 않을 수 있다.
컴포넌트 안에 useState나 useEffect같은 Hook들이 여러 번 사용이 가능한데, React는 Hook을 호출되는 순서로 저장을 한다. 그런데 조건문이나 반복문 안에서 호출할 경우 호출되는 순서대로 저장이 어려워 에러가 발생한다.

2. 오직 리액트 함수 내에서만 사용 가능하다.

리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안된다는 의미다. Hook은 React 함수 컴포넌트 내에서 사용되도록 만들어진 메서드이기 때문에 일반 JavaScript 함수 내에서는 돌아가지 않는다.