[React] Hooks 개념 정리

리액트에서 함수형 컴포넌트를 본격적으로 사용할 수 있게 만든 것이 바로 Hooks이다. Hooks는 리액트 16.8부터 도입되었고, 지금은 함수형 컴포넌트의 기본 문법처럼 자리 잡았다.

---

Hooks의 개념과 useState, useEffect

Hooks란?

Hooks는 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 로직을 사용할 수 있게 해주는 기능이다. 원래는 클래스형 컴포넌트에서만 가능했던 기능을 함수형에서도 사용할 수 있게 해준다.

useState

컴포넌트 내부에서 상태를 선언하고, 그 값을 변경할 수 있도록 해주는 Hook이다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

useEffect

컴포넌트의 라이프사이클 로직을 처리할 수 있는 Hook이다. 데이터 가져오기, 구독 설정, 타이머 설정 등 부수 효과(side effect)를 처리할 때 사용한다.

import { useEffect } from 'react';

useEffect(() => {
  console.log("컴포넌트 마운트 시 실행");

  return () => {
    console.log("컴포넌트 언마운트 시 실행");
  };
}, []); // 빈 배열은 한 번만 실행됨

---

useMemo, useCallback, useRef

useMemo

비싼 연산(무거운 연산 결과)을 캐싱(memoization)해서 성능을 최적화할 수 있는 Hook이다.

const expensiveValue = useMemo(() => {
  return someHeavyFunction(input);
}, [input]);

useCallback

컴포넌트가 리렌더링될 때마다 함수가 새로 생성되는 걸 방지하고, 함수 자체를 메모이제이션하는 Hook이다. 주로 자식 컴포넌트에 콜백 함수를 props로 넘길 때 사용한다.

const handleClick = useCallback(() => {
  console.log('클릭됨');
}, []);

useRef

컴포넌트 내부에서 DOM 요소에 직접 접근하거나, 렌더링과 상관없는 값을 유지할 때 사용하는 Hook이다.

const inputRef = useRef();

function focusInput() {
  inputRef.current.focus();
}

return <input ref={inputRef} />;

---

Hook의 규칙과 Custom Hook 만들기

Hook의 규칙

1. 최상위에서만 호출할 것 – 조건문이나 반복문 안에서 Hook을 호출하면 안 된다.
2. 리액트 함수형 컴포넌트 혹은 커스텀 Hook 내부에서만 호출할 것

Custom Hook 만들기

자주 쓰이는 로직을 함수로 분리해서 재사용할 수 있다. 보통 use로 시작하는 이름을 붙인다.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  return <p>현재 창 너비: {width}px</p>;
}

---

Hooks는 함수형 컴포넌트에서 상태 관리, 라이프사이클 처리, 성능 최적화 등 거의 모든 기능을 가능하게 해주는 핵심 기능이다.