[React] - Hook

📔Hook이란?

✍️ Hook의 정의

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

✍️ Hook 등장 배경

클래스 컴포넌트와 함수 컴포넌트
리액트에서 컴포넌트는 클래스형과 함수형으로 나눠진다.
초창기에는 class 컴포넌트에서만 사용할 수 있는 기술들이 있었기에 매번 class 컴포넌트만을 사용하여 컴포넌트를 생성했다.
그러나 class형 컴포넌트를 사용하다보니 문제점들이 생겼다.
1. 컴포넌트 간에 로직재사용이 부가능하다.
2. 코드가 복잡해진다.

Hook의 등장 !!
React 16.8버전에서 새로 추가된 기능이다.
이전에 리액트가 겪던 문제들은 해결해주며 함수 컴포넌트에서도 상태값 접근과 자식 요소에 접근이 가능해졌다.
리액트는 useState, useEffect 같은 내장 Hook들을 제공한다.

✍️ Hook의 장점

1. 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다.
   • 이것을 이용해 재사용이 가능함.
   • 코드의 재사용은 가독성을 높이고 유지보수에 용이하다.
2. 계층의 변화 없이 상태 관련 로직을 재사용할 수 있다.

✍️ Hook 사용 규칙

❗️함수 컴포넌트 내에서 호출

Hook을 호출할 수 있는 곳은 다음과 같다.
1. 함수 컴포넌트 내부
2. custom Hook 내부
위 두가지 경우를 제외한 곳에서는 Hook을 호출할 수 없다.
클래스 컴포넌트의 메서드 뿐만 아니라 일반 Javascript 함수에서도 사용할 수 없다.

❗️최상위에서 호출

Hook은 항상 함수 컴포넌트 내의 최상위에서만 호출해야 한다.
이러한 규칙을 따른다면 해당 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 여러 개의 Hook이 호출되는 것을 보장할 수 있다.
또한 반복문, 조건문, 중첩된 함수 내에서는 Hook을 호출하면 안된다.
특정 조건에 부합하지 않는 경우 Hook을 호출하지 않게 되고, Hook이 사용된 순서가 섞이기 때문이다.