실무에서 가장 많이 쓰는 React Hooks 정리

실무에서는 상태 관리, API 호출, 성능 최적화, 페이지 이동 같은 작업을 자주 하게 됩니다.
이와 관련된 필수 React Hooks + Next.js 전용 Hooks을 정리해 보겠습니다.

---

1. 상태(State) 관리 관련 Hooks

useState → 컴포넌트 내부 상태 관리

import { useState } from "react";

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

  return <button onClick={() => setCount(count + 1)}>클릭: {count}</button>;
};

---

useReducer → 복잡한 상태 관리 (Redux 같은 패턴)

import { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
};

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
    </div>
  );
};

---

2. 생명주기(Lifecycle) & 비동기 작업

useEffect → API 호출, 이벤트 리스너 등록, 외부 상태 동기화

import { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((res) => res.json())
      .then((json) => setData(json));
  }, []);

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

---

useLayoutEffect → 렌더링 후 동기적 실행 (UI 조작 필요할 때)

import { useLayoutEffect, useRef } from "react";

const Box = () => {
  const boxRef = useRef(null);

  useLayoutEffect(() => {
    boxRef.current.style.transform = "scale(1.2)";
  }, []);

  return <div ref={boxRef} style={{ width: 100, height: 100, background: "blue" }} />;
};

---

3. 성능 최적화 Hooks

useMemo → 연산 결과를 캐싱 (불필요한 재계산 방지)

import { useState, useMemo } from "react";

const ExpensiveCalculation = ({ num }) => {
  const result = useMemo(() => {
    console.log("비싼 계산 실행!");
    return num * 2;
  }, [num]);

  return <p>결과: {result}</p>;
};

---

useCallback → 함수를 메모이제이션 (불필요한 함수 재생성 방지)

import { useState, useCallback } from "react";

const Button = ({ onClick }) => {
  console.log("버튼 렌더링!");
  return <button onClick={onClick}>클릭</button>;
};

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <Button onClick={handleClick} />
      <p>클릭 수: {count}</p>
    </div>
  );
};

---

4. DOM 조작 관련 Hooks

useRef → DOM 요소에 직접 접근 (렌더링 영향 없음)

import { useRef, useEffect } from "react";

const InputFocus = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="자동 포커스됨" />;
};

---

5. Next.js에서 자주 쓰는 Hooks

useRouter → 페이지 이동 및 현재 경로 가져오기

import { useRouter } from "next/router";

const NavigateButton = () => {
  const router = useRouter();

  return <button onClick={() => router.push("/dashboard")}>대시보드로 이동</button>;
};

---

usePathname → 현재 페이지의 경로 확인 (Next.js 13+)

import { usePathname } from "next/navigation";

const CurrentPage = () => {
  const pathname = usePathname();

  return <p>현재 경로: {pathname}</p>;
};

---

useSearchParams → URL의 쿼리 파라미터 가져오기 (Next.js 13+)

import { useSearchParams } from "next/navigation";

const QueryExample = () => {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");

  return <p>쿼리 파라미터 ID: {id}</p>;
};

---

6. 실무에서 자주 쓰는 Hooks 요약

종류	훅 이름	주요 기능
상태 관리	useState, useReducer	컴포넌트 상태 관리
비동기 처리	useEffect	API 호출, 이벤트 등록
성능 최적화	useMemo, useCallback	불필요한 계산 & 함수 재생성 방지
DOM 접근	useRef	특정 요소 접근, 포커스 조작
Next.js 전용	useRouter, usePathname, useSearchParams	페이지 이동, URL 정보

이제 이 훅들만 잘 익혀도 실무에서 React/Next.js 개발하는 데 문제 없습니다.