1.1 Hook이란?

1.1.1 Hook의 정의

<aside> 💡 Hook은 함수 컴포넌트에서 상태 관리와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수입니다.

</aside>

Hook은 React 버전 16.8부터 새로 추가된 기능입니다. Hook을 사용하려면 모든 React 패키지(ex. React DOM)가 16.8.0 이상이야 합니다. 패키지를 모두 업데이트하지 않으면 Hook이 작동하지 않습니다. Hook이 등장하고 가장 달라진 점은, 클래스 컴포넌트에서만 사용할 수 있던 유용한 기능들을 함수 컴포넌트에서도 사용할 수 있게 되었다는 것입니다.

함수 컴포넌트는 상태를 가질 수 없고, 메서드를 사용해 생명주기를 관리할 수 없습니다. 그래서 기존에는 코드의 복잡성과 낮은 재사용성 등의 여러 문제점에도 불구하고 클래스 컴포넌트를 사용해야만 했습니다. 하지만 Hook이 등장하면서 함수 컴포넌트를 이용해 더욱 간결하고 효율적인 코드로 상태 관리 및 생명주기 기능을 사용할 수 있게 되었습니다.

1.1.2 Hook의 종류

React는 다음과 같은 내장 Hook을 제공하고 있습니다.

그림 1-1 React에 내장된 Hook API

• 기본 Hook은 상태 관리와 생명주기 기능을 위해 가장 많이 사용됩니다.
• 추가 Hook은 기본 Hook을 변경하거나 특정한 경우에 필요에 따라 사용합니다.
• Hook 라이브러리에서는 여러 유용한 기능을 제공하고 있어 Custom Hook을 만들기 전에 살펴보기 좋습니다.