- 공유 링크 만들기
- X
- 이메일
- 기타 앱
React
React Hooks
React Hook 완전 정복 2026
React Hook과 memo 완전 가이드
useState · useEffect · useRef · useMemo · useCallback · Custom Hook — 실전 패턴 총정리
✦ 핵심 훅 완전 정리
✦ 흔한 실수 & 해결책
✦ 커스텀 훅 패턴
React Hook은 2019년 React 16.8에서 도입된 이후 React 개발의 핵심이 되었습니다. 클래스 컴포넌트 없이도 상태 관리와 사이드 이펙트 처리가 가능해졌지만, 각 훅의 동작 원리를 정확히 이해하지 않으면 미묘한 버그와 성능 문제가 생기기 쉽습니다. 이 글에서는 핵심 훅들의 올바른 사용법과 실수를 방지하는 패턴을 정리합니다.
useState — 상태 관리의 기본
useState는 컴포넌트의 로컬 상태를 관리합니다. 상태가 변경되면 컴포넌트가 리렌더됩니다.
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
// ❌ 현재 상태에 직접 의존하는 업데이트 (stale closure 위험)
const increment = () => setCount(count + 1)
// ✅ 함수형 업데이트 — 항상 최신 상태를 받음
const incrementSafe = () => setCount(prev => prev + 1)
// 객체 상태 업데이트 — 반드시 스프레드로 복사
const [user, setUser] = useState({ name: 'Jake', age: 30 })
const updateAge = () => setUser(prev => ({ ...prev, age: 31 }))
return
}
⚠️ 흔한 실수: 객체 직접 변경
user.age = 31처럼 상태 객체를 직접 수정하면 React가 변경을 감지하지 못해 리렌더가 발생하지 않습니다. 반드시 setUser({...user, age: 31})처럼 새 객체를 만들어 전달해야 합니다.
useEffect — 사이드 이펙트 처리
useEffect는 렌더링 이후 실행되는 사이드 이펙트를 처리합니다. API 호출, 이벤트 리스너, 타이머 등에 사용합니다.
import { useState, useEffect } from 'react'
function UserProfile({ userId }) {
const [user, setUser] = useState(null)
useEffect(() => {
// 언마운트 후 setState 방지를 위한 cleanup 패턴
let cancelled = false
async function fetchUser() {
const data = await getUser(userId)
if (!cancelled) setUser(data)
}
fetchUser()
// cleanup 함수 — 컴포넌트 언마운트 또는 다음 effect 실행 전 호출
return () => { cancelled = true }
}, [userId])
useEffect(() => {
const handleResize = () => console.log(window.innerWidth)
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
return user ? {user.name} : 로딩 중...
}
⚠️ 의존성 배열 빠뜨리기
useEffect 내에서 사용하는 변수나 함수는 의존성 배열에 반드시 포함해야 합니다.
useEffect 내에서 사용하는 변수나 함수는 의존성 배열에 반드시 포함해야 합니다.
eslint-plugin-react-hooks의 exhaustive-deps 규칙을 활성화하면 빠진 의존성을 자동으로 감지할 수 있습니다.
useRef — 렌더링 없는 값 저장
useRef는 두 가지 용도로 사용됩니다. 첫째는 DOM 요소에 직접 접근하는 것이고, 둘째는 리렌더를 발생시키지 않는 값을 저장하는 것입니다.
import { useRef, useEffect } from 'react'
function VideoPlayer() {
// DOM 접근
const videoRef = useRef(null)
const handlePlay = () => {
videoRef.current?.play()
}
// 이전 값 추적 (렌더 발생 없이)
const prevCountRef = useRef(null)
const [count, setCount] = useState(0)
useEffect(() => {
prevCountRef.current = count
})
// 타이머 ID 저장 (clearTimeout을 위해)
const timerRef = useRef(null)
const startTimer = () => {
timerRef.current = setTimeout(() => console.log('완료'), 3000)
}
useEffect(() => () => clearTimeout(timerRef.current), [])
return
}useMemo vs useCallback 실전 비교
| 구분 | useMemo | useCallback |
|---|---|---|
| 캐싱 대상 | 계산된 값 | 함수 자체 |
| 사용 시점 | 비싼 계산, 객체 안정화 | 자식에 전달하는 콜백 |
| 반환값 | 콜백의 반환값 | 콜백 함수 자체 |
| 동치식 | useMemo(() => fn(), deps) | useMemo(() => fn, deps) |
useReducer — 복잡한 상태 관리
여러 하위 값을 포함하는 복잡한 상태 로직, 또는 다음 상태가 이전 상태에 의존하는 경우 useReducer가 useState보다 적합합니다.
import { useReducer } from 'react'
type State = { count: number; status: 'idle' | 'loading' | 'error' }
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'setLoading' }
| { type: 'setError' }
function reducer(state: State, action: Action): State {
switch (action.type) {
case 'increment': return { ...state, count: state.count + 1 }
case 'decrement': return { ...state, count: state.count - 1 }
case 'setLoading': return { ...state, status: 'loading' }
case 'setError': return { ...state, status: 'error' }
default: return state
}
}
function App() {
const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' })
return (
{state.count}
)
}useContext — 전역 상태 공유
useContext는 prop drilling(중간 컴포넌트를 거쳐 props를 전달하는 것)을 피할 때 유용합니다. 단, Context 값이 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더되므로 과도한 사용은 성능 문제를 일으킵니다.
import { createContext, useContext, useState } from 'react'
// Context 생성 (기본값 명시 권장)
const ThemeContext = createContext('light')
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light')
return (
{children}
)
}
// 커스텀 훅으로 감싸면 사용 편의성 + 오류 방지
function useTheme() {
const ctx = useContext(ThemeContext)
if (!ctx) throw new Error('useTheme은 ThemeProvider 내에서만 사용 가능합니다')
return ctx
}커스텀 Hook 패턴 3가지
커스텀 Hook은 컴포넌트 로직을 재사용 가능한 함수로 추출하는 패턴입니다. 이름은 반드시 use로 시작해야 합니다.
// 패턴 1: 데이터 패칭 훅
function useFetch(url) {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
fetch(url)
.then(r => r.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false))
}, [url])
return { data, loading, error }
}
// 패턴 2: 로컬스토리지 동기화 훅
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const stored = localStorage.getItem(key)
return stored ? JSON.parse(stored) : initialValue
})
const setStoredValue = useCallback((val) => {
setValue(val)
localStorage.setItem(key, JSON.stringify(val))
}, [key])
return [value, setStoredValue]
}
// 패턴 3: 디바운스 훅
function useDebounce(value, delay) {
const [debounced, setDebounced] = useState(value)
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay)
return () => clearTimeout(timer)
}, [value, delay])
return debounced
}Hook 규칙과 흔한 실수
React Hook에는 반드시 지켜야 하는 두 가지 규칙이 있습니다.
- 최상위에서만 호출: 반복문, 조건문, 중첩 함수 안에서 훅을 호출하면 안 됩니다.
- React 함수 컴포넌트 또는 커스텀 훅에서만 호출: 일반 JavaScript 함수에서는 사용할 수 없습니다.
💡 eslint-plugin-react-hooks 필수 설치
위 규칙들을 자동으로 검사해주는 ESLint 플러그인입니다. CRA, Next.js, Vite 등 주요 프레임워크의 기본 설정에 이미 포함되어 있습니다. 직접 설정할 때는
위 규칙들을 자동으로 검사해주는 ESLint 플러그인입니다. CRA, Next.js, Vite 등 주요 프레임워크의 기본 설정에 이미 포함되어 있습니다. 직접 설정할 때는
npm install eslint-plugin-react-hooks로 설치하세요.
자주 묻는 질문 (FAQ)
🔗 관련 포스트
- React 성능 최적화 완전 가이드 2026
- Next.js 성능 최적화 가이드 2026
- Zustand vs Jotai vs Redux 2026 — 상태 관리 완전 비교
- Vitest vs Jest 2026 — 마이그레이션 완전 가이드
| 항목 | ||
|---|---|---|
| useCallback | 함수 메모이제이션 | - |
| useMemo | 계산 결과 캐싱 | - |
| memo | 컴포넌트 재렌더 방지 | - |
댓글
댓글 쓰기