[React] React Hook이란?

React에서는 다양한 Hooks을 제공하고 있다. 그 예로 useState, useEffect, useContext, useCallback, useMemo 등이 있다. 숨쉬듯 사용하고 있는 Hooks들이다. 그런데 Hook이란 뭘까? 누군가 물어본다면 대답이 안 나온다. 리액트 개발자로써 숙연해지는 순간이다. 그래서 알아왔다.

Hook이란?

React Hooks는 기존에는 클래스 컴포넌트에서만 사용할 수 있었던 React의 기능들을 간단한 함수형 컴포넌트에서도 사용할 수 있게 해준다. React의 기능들에는 상태관리, 상태(state)변화에 따라 특정 동작을 수행하게 하는 것 등이 포함된다.
React에서는 미리 정의된 Hooks, 예를 들어 useState, useEffect, useContext 등이 제공되어 있고, 사용자 정의 Hooks를 작성하여 상태 로직을 재사용 할 수도 있다. "상태 로직 재사용"이란 특정 상태 관리 로직이 여러 컴포넌트에서 공유되고 재사용 되는 것을 의미한다. 일반적으로 각 컴포넌트에서 개별적으로 같은 상태 관리 로직을 구현하면 코드가 반복되고 관리가 어려워진다. 이런 경우 커스텀 Hook을 만들어 이 상태 관리 로직을 재사용 할 수 있다.
예를 들어, 여러 컴포넌트에서 클릭 횟수를 추적해야 한다면, useClickCounter Hook을 만들어 이 기능을 재사용 할 수 있다. 이렇게 하면 클릭 횟수 추적 로직은 한 곳에서만 관리되고, 모든 컴포넌트에서 편리하게 사용할 수 있다.

import { useState } from 'react';

function useClickCounter() {
  const [count, setCount] = useState(0)
  
  return {
    count,
    increment: () => setCount(count + 1),
  };
}

function MyComponent() {
  const { count, increment } = useClickCounter();

  return (
    <div>
      <p>You've clicked the button {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

 

---

 

Custom Hook

사용자 정의 Hooks는 기존에 제공되는 Hooks를 조합하여 기존 기능을 확장하거나 새로운 기능을 추가하는 것이 가능하다. 사용자 정의 Hooks를 만들기 위해서는 다음과 같은 규칙을 따라야 한다 :

1. Hooks는 항상 use라는 접두어를 가져야 한다.
2. Hooks는 항상 함수형 컴포넌트 내부에서만 사용할 수 있다.

그리고 구현한 기능을 함수형 컴포넌트에서 사용할 수 있도록 반환(return)해주면 리턴된 값을 다른 컴포넌트에서 사용할 수 있게 된다.

---

Hooks와 일반 함수의 차이점

Hooks API는 React 내에서 정의된 특별한 함수들의 집합이다. Hooks는 일반 함수와 다르게 React 기능, 예를 들어 상태 관리, 렌더링 후 부수 효과 등을 컴포넌트에 추가할 수 있다. 함수형 컴포넌트를 사용할 때 상태 관리나 다른 React 기능을 추가할 때 Hooks를 사용하면 좋다.

* Hook은 갈고리라는 뜻을 갖고 있다. 개발 용어로써의 Hook은 어떤 이벤트가 발생했을 때 그 이벤트에 따라서 함께 실행되는 트리거를 포함한 시스템 내지는 그런 프로그래밍 기법을 의미한다.