훅이란? 그리고 커스텀 훅이란?

김현준·2024년 8월 29일

리액트

목록 보기

9/11

훅이란?

Hook은 리액트의 함수형 컴포넌트에서 상태(state)와 생명주기 기능(lifecycle features)을 사용할 수 있게 해주는 함수이다.
리액트 16.8부터 도입되었으며, 대표적인 기본 훅으로는 useState, useEffect, useContext 등이 있다.

리액트 컴포넌트의 유형 변화

리액트의 컴포넌트는 크게 클래스형과 함수형으로 나눠진다.

Hook 도입 전

클래스형 컴포넌트는 상태값에 접근하고 생명주기 메서드를 사용하기 위해 주로 사용되었다.
함수형 컴포넌트는 상태값 접근과 생명주기 메서드 사용이 불가능하여, 한 번 호출된 후 메모리에서 사라졌다.
클래스형 컴포넌트의 문제점
- 로직 재사용의 어려움
  - render props나 HOC(고차 컴포넌트) 패턴을 통해 해결할 수 있으나, 이로 인해 코드 추적이 어려워지고, 복잡한 구조로 인해 wrapper hell에 빠질 수 있다.
- 복잡한 코드 구조
  - 상태 관리와 생명주기 메서드가 여러 메서드에 나뉘어져 있어 코드가 복잡해질 수 있다.

Hook의 등장

리액트 16.8버전부터 Hook이 도입되면서, 함수형 컴포넌트에서도 상태와 생명주기 기능을 사용할 수 있게 되었다.
예를 들어, useState를 사용하면 클래스를 사용하지 않고도 상태를 가질 수 있다.

Hook 덕분에 함수형 컴포넌트에서 상태값 접근 및 생명주기 기능을 보다 쉽게 구현할 수 있으며, 클래스형 컴포넌트의 복잡성을 피할 수 있게 되었다.

Hook의 장점

컴포넌트로부터 상태 관련 로직을 추상화
- 상태 관련 로직을 컴포넌트에서 분리하여 독립적으로 재사용할 수 있다. 이는 코드 가독성을 높이고 유지보수도 용이해진다.
상태 로직의 계층적 중첩 없이 재사용 가능
- Hook을 사용하면 컴포넌트 계층 구조를 복잡하게 만들지 않고도 상태 관련 로직을 재사용할 수 있다.
생명주기 메서드 대신 작은 함수의 묶음으로 구성
- 생명주기 메서드에 의존하지 않고, Hook을 통해 작은 함수 단위로 컴포넌트를 구성할 수 있다.

Hook의 규칙

1. 최상위 에서만 훅을 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서 사용 불가
왜 훅의 호출 순서가 같아야 하는 걸까?
- 리액트가 상태값을 구분할 수 있는 유일한 정보는 Hook이 사용된 순서이기 때문이다. 예를 들어, 반복문 안에서 Hook을 호출하면, 반복문의 조건에 따라 호출 순서가 달라질 수 있어 오류가 발생할 수 있다.
- 조건문이나 반복문에서 상태 로직을 사용하고 싶다면, useEffect 안에 넣어 사용하면 된다.

2. 함수 컴포넌트 또는 커스텀 훅에서만 호출할 것

일반 자바스크립트 함수에서는 Hook을 호출할 수 없다.
직접 작성한 커스텀 Hook에서는 사용이 가능하다.

useEffect를 이용하여 특정 조건에 따라 사이드 이펙트를 실행한 예시

function ExampleComponent() {
  const [count, setCount] = useState(0);
  const [isEven, setIsEven] = useState(true);
ㅤ
  // count 값이 변경될 때마다 isEven 상태를 업데이트
  useEffect(() => {
    if (count % 2 === 0) {
      setIsEven(true);
    } else {
      setIsEven(false);
    }
  }, [count]); // count가 변경될 때마다 실행됨
.
.
.
}

일반 JavaScript 함수, React 훅, React 컴포넌트 비교

구분	일반 함수	React Hook	React 컴포넌트
사용 목적	로직 캡슐화	상태, 생명주기 제어	UI 정의 및 렌더링
사용 위치	어디서나 가능	컴포넌트 또는 커스텀 훅 내부	React 애플리케이션 내부
React 의존성	없음	있음	있음
상태/렌더링	상태 관리 불가	가능	상태 및 props로 동적 UI 가능
반환값	연산 결과	상태/이벤트 처리 로직	JSX (React 엘리먼트)

일반 JavaScript 함수:
- 어디서나 사용 가능하며 React와 독립적으로 동작한다.
- 로직을 캡슐화하는 데 유용하다.
React 훅:
- React의 상태 관리와 생명주기 메서드를 단순화한다.
- React 컴포넌트 내부에서만 동작하며, 반드시 훅의 호출 규칙을 따라야 한다.
React 컴포넌트:
- React에서 사용자 인터페이스(UI)를 생성하는 기본 단위이다.
- 컴포넌트 내부에서 훅을 사용하여 상태를 관리하거나 생명주기를 제어할 수 있다.
- 컴포넌트는 재사용 가능한 UI 조각을 만드는 데 집중한다.

커스텀 훅이란?

커스텀 훅(Custom Hook)은 리액트에서 제공하는 기본 훅(useState, useEffect 등)을 조합하여 사용자가 직접 만드는 훅이다. 커스텀 훅을 사용하면 여러 컴포넌트에서 반복적으로 사용하는 로직을 재사용할 수 있다.

커스텀 훅이 되는 조건

1. use로 시작하는 함수 이름이어야 한다.

useMyData처럼 명명해야 리액트가 "이건 훅이구나"라고 판단

2. 커스텀 훅 내부에서 다른 훅(useState, useEffect, 등)을 호출해야 한다.

실제로 내부에 React Hook을 호출해야 의미 있는 커스텀 훅
호출된 Hook의 결과를 리턴하거나, 그로 인해 상태나 side effect를 관리

function useCounter() {
  const [count, setCount] = useState(0); // 진짜 훅
  return { count, setCount };
}

3. 함수 컴포넌트 or 다른 훅 내부에서만 호출되어야 한다.

훅은 일반 함수나 조건문, 반복문 내부에서 호출하면 안 된다.
항상 컴포넌트 최상단 or 커스텀 훅 최상단에서 호출되어야 한다.

function MyComponent() {
  const { count } = useCounter(); // 컴포넌트에서 호출 OK
  return <div>{count}</div>;
}

function useAnotherHook() {
  const { count } = useCounter(); // 훅 내부에서 호출 OK
}

커스텀 훅의 장점

1. 복잡한 로직을 단순하게 관리
복잡한 비즈니스 로직이나 상태 관리 로직을 커스텀 훅으로 분리하면, 컴포넌트가 훨씬 단순해진다.

2. 다양한 컴포넌트에서 재사용 가능
한 번 만들어둔 커스텀 훅을 여러 컴포넌트에서 재사용할 수 있어, 코드의 일관성을 유지할 수 있다.

3. 컴포넌트 간에 상태와 로직 공유
여러 컴포넌트가 동일한 상태나 로직을 공유해야 할 때, 커스텀 훅을 사용하면 상태와 로직을 쉽게 공유할 수 있다.

4. 독립적인 테스트 가능
커스텀 훅은 독립적으로 테스트할 수 있어, 로직에 대한 단위 테스트 작성이 용이해진다.

김현준

기록하자

이전 포스트

리액트 쿼리의 다양한 훅

다음 포스트