Hook이 뭐야?
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 '연동(hook into)'할 수 있게 해주는 함수이다. Hook을 이용하여 기존 클래스 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
Hook이 없던 시절에는 함수 컴포넌트로 state나 생명주기 기능을 조작할 수 있는 방법이 없었기 때문에 클래스를 강제적으로 사용해야만 했다. 그런데 hook이 등장함으로써 함수 컴포넌트 내부에서 state와 생명주기 기능을 조작할 수 있게 되었다. 즉, React는 Hook의 등장 이후로 더 이상 클래스에 의존하지 않게 되었다고 할 수 있다.
Hook은 크게 built-in hook과 custom hook으로 나뉜다. built-in hook은 React에서 제공하는 hook이고, custom hook은 개발자가 새롭게 생성하는 hook이다. 참고로 hook 이름은 관습적으로 'use'로 시작한다. use로 시작하는 함수는 전부 built-in hook이다. Built-in hook에는 useState, useEffect, useMemo, useContext 등이 있다.
Hook이 나오게 된 배경
React는 클래스 컴포넌트와 함수 컴포넌트를 제공한다. Hook이 등장하기 전까지는 주로 클래스 컴포넌트가 사용됐었다.
클래스 컴포넌트 vs 함수 컴포넌트
| Class Component | Functional Component |
|---|---|
| 더 많은 기능 제공 | 더 적은 기능 제공 |
| 복잡하고 긴 코드 | 간단하고 짧은 코드 |
| 더딘 성능 | 빠른 성능 |
함수 컴포넌트의 더 적은 기능을 제공한다 함은 state와 리액트 생명주기(Mounting, Updating, Unmounting)를 사용하지 못한다는 것이었고 그렇기 때문에 함수형 컴포넌트의 장점들을 뒤로하고 클래스 컴포넌트를 사용했었다.
하지만 React 16.8 업데이트로 hook이 등장함에 따라 함수 컴포넌트에도 생명주기를 사용할 수 있게 되어 데이터를 가져오고 컴포넌트를 시작하자마자 API를 호출하는 등 많은 기능들을 사용할 수 있게 되었다.
Hook의 생명주기 다이어그램
Custom Hooks
HOC(Higher Order Component)란?
화면에서 재사용 가능한 로직만을 분리해서 컴포넌트로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법
Hook이 나오기 전에는 HOC가 추천되는 방법이었다. 하지만 이는 너무 많은 Wrapper 컴포넌트가 생긴다는 단점이 있었다. Wrapper가 많아지면 데이터 흐름을 파악하기 힘들어진다. 그리고 이 문제는 커스텀 훅으로 해결할 수 있다. HOC 컴포넌트를 커스텀 훅으로 대체해서 너무 많은 Wrapper 컴포넌트를 줄일 수 있다.
커스텀 훅은 컴포넌트 함수 내에서 반복되거나 복잡한 부분을 따로 떼어낸 것이다. 커스텀 훅은 컴포넌트와 달리 jsx 구문이 없기 때문에 props 개념이 없다. 따라서 일반 함수처럼 파라미터를 받고 내부에서 다른 훅들로 반복되는 로직을 짜면 된다.
Hooks 사용 규칙
- 최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
- React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다.
Reference
