React의 use 접두어란?

useState, useEffect, useRef, useMemo, useCallback 개념 정리

React에서 useState, useEffect, useRef 등 use로 시작하는 함수들을 자주 보게 된다. 이들은 모두 Hook이라고 불리는 React의 기능이며, 함수형 컴포넌트에서 상태나 사이드 이펙트 같은 기능을 사용할 수 있게 해준다.

이 글에서는 use 접두어의 의미와 함께 대표적인 Hook들과 고급 Hook들을 예제를 통해 정리한다.

---

use 접두어란?

React에서는 Hook 함수는 반드시 use로 시작해야 한다. 이 규칙은 단순한 네이밍 컨벤션이 아니라, React가 내부적으로 해당 함수가 Hook임을 인식하는 공식적인 기준이다.

만약 use로 시작하지 않는다면, React는 그 함수를 Hook으로 간주하지 않으며, 의도한 동작을 보장하지 않는다.

---

Hook이란?

Hook은 함수형 컴포넌트 안에서 React의 기능(상태 관리, 생명주기 등)을 사용할 수 있도록 해주는 함수다.
Hook이 나오기 전에는 클래스형 컴포넌트에서만 상태와 라이프사이클을 사용할 수 있었으나, Hook이 도입되면서 함수형 컴포넌트만으로도 동일한 기능을 구현할 수 있게 되었다.

---

주요 Hook 정리

1. useState – 상태 관리

import { useState } from 'react'

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

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

• useState는 상태 값을 만들고, 해당 값을 업데이트하는 함수를 반환한다.
• 상태 변경 시 컴포넌트는 리렌더링된다.

---

2. useEffect – 생명주기 처리

import { useEffect } from 'react'

function Example() {
  useEffect(() => {
    console.log('컴포넌트가 마운트됨')

    return () => {
      console.log('컴포넌트가 언마운트됨')
    }
  }, [])
}

• useEffect는 컴포넌트가 마운트되거나 업데이트될 때 실행된다.
• 의존성 배열을 통해 실행 시점을 제어할 수 있다.
  • [] → 처음 1회 실행 (마운트)
  • [value] → 특정 값이 변경될 때 실행

---

고급 Hook 정리

3. useRef – DOM 참조 및 값 유지

import { useRef, useEffect } from 'react'

function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null)

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

  return <input ref={inputRef} />
}

• useRef는 DOM 요소나 값을 참조하는 용도로 사용된다.
• .current 프로퍼티로 접근 가능하며, 값이 변경되어도 리렌더링되지 않는다.
• 상태를 저장하지만 리렌더를 유발하고 싶지 않을 때 유용하다.

---

4. useMemo – 연산 결과 메모이제이션

import { useMemo, useState } from 'react'

function ExpensiveComponent({ number }: { number: number }) {
  const [count, setCount] = useState(0)

  const expensiveValue = useMemo(() => {
    console.log('복잡한 계산 실행')
    return number * 1000
  }, [number])

  return (
    <div>
      <p>계산값: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>카운트: {count}</button>
    </div>
  )
}

• useMemo는 복잡한 계산 결과를 메모이제이션하여 불필요한 연산을 피한다.
• 의존성 배열의 값이 변경되지 않으면 이전 값을 재사용한다.
• 렌더링 최적화에 도움이 된다.

---

5. useCallback – 함수 메모이제이션

import { useCallback, useState } from 'react'

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

  const handleClick = useCallback(() => {
    console.log('카운트:', count)
  }, [count])

  return <button onClick={handleClick}>로그 출력</button>
}

• useCallback은 함수를 메모이제이션한다.
• 의존성 배열이 동일하면 이전에 생성한 함수를 그대로 재사용한다.
• 주로 자식 컴포넌트에 콜백 함수를 props로 넘길 때 불필요한 렌더링을 방지하는 데 사용된다.

---

커스텀 Hook 작성 시 use 접두어 필수

React에서는 직접 Hook을 조합해서 커스텀 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
}

• 커스텀 Hook은 일반 함수처럼 생겼지만 내부에 Hook을 포함하고 있어 use로 시작해야만 React가 올바르게 동작을 추적할 수 있다.
• 이름만 use로 시작하는 것이 아니라, 실제로 내부에서 다른 Hook을 사용해야 Hook으로 간주된다.

---

정리

Hook	용도
useState	컴포넌트 상태값을 선언하고 업데이트
useEffect	컴포넌트의 생명주기 처리
useRef	DOM 참조 또는 리렌더링 없는 값 저장
useMemo	계산 결과 캐싱
useCallback	함수 메모이제이션
커스텀 Hook	use로 시작하는 사용자 정의 Hook

---

마무리

React의 use 접두어는 단순한 명명 규칙이 아니라, React가 해당 함수를 Hook으로 인식하기 위한 핵심 규칙이다.
Hook을 제대로 이해하고 활용하면 코드의 재사용성과 성능을 높일 수 있으며, 함수형 컴포넌트만으로도 유연한 설계를 할 수 있다.