📌 Hooks

리액트 Hook은 클래스로 컴포넌트를 만들 때 발생하는 문제점을 해결하기 위해 등장하였다.

• 리액트 Hook을 사용하면 함수 컴포넌트 중심으로 개발이 가능하다.
• 함수 컴포넌트에서도 상태, 로직을 추출하여 다른 컴포넌트에서 재사용 할 수 있다.

1. 래퍼지옥

클래스 컴포넌트 만들 시 문제는 고차 컴포넌트를 사용하게 될 경우 래퍼 지옥(Hell)이 발생한다.

2. 비대해진 컴포넌트

래퍼 지옥을 만들지 않기 위해서는 하나의 컴포넌트에 담아서 사용해야하는데 이럴 경우 컴포넌트가 비대해지는 문제가 있다.

그래서 리액트 팀은 기존 개발 방식을 유지하면서 새로운 API를 추가하는 방식으로 리액트 Hook을 개발하였다.

함수 컴포넌트의 문제점이 내부에서 상태를 관리할 수 없다는 것이였는데 이를 Hook을 통해 해결하였고 API를 제공하여 훨씬 간결하게 클래스 컴포넌트처럼 사용할 수 있게 되었다.

🥁 Hook 사용 규칙

1. 리액트 함수 컴포넌트, 커스텀 Hook 함수 안에서만 사용할 수 있다.

일반 함수, 클래스 컴포넌트에서 Hook을 호출하면 안된다.

2. Hook은 문(statement) 또는 중첩된 함수 안에서 사용할 수 없다.

컴포넌트, 커스텀 Hook 함수 최상위에서만 사용 가능하다.