React Hooks 심화 - useEffect, useMemo, useReducer, 커스텀 Hook

Mon, 16 Feb 2026 13:15:00 +0900

React Hooks란?

Hooks는 함수형 컴포넌트에서 상태 관리, 사이드 이펙트 처리, 성능 최적화 등을 가능하게 하는 함수입니다. React 16.8에서 도입되어 현재 React 개발의 핵심이 되었습니다.

Hooks 규칙

최상위에서만 호출: 조건문, 반복문, 중첩 함수 내에서 호출 금지
React 함수 내에서만 호출: 일반 JavaScript 함수에서 호출 금지

// 잘못된 사용
function BadExample() {
 if (someCondition) {
 const [value, setValue] = useState(""); // 조건문 안에서 호출 금지
 }
}

// 올바른 사용
function GoodExample() {
 const [value, setValue] = useState("");

 if (someCondition) {
 // Hook이 아닌 로직은 조건문 안에서 사용 가능
 }
}

useEffect - 사이드 이펙트 처리

기본 사용법

import { useState, useEffect } from "react";

function UserProfile({ userId }: { userId: number }) {
 const [user, setUser] = useState<User | null>(null);
 const [loading, setLoading] = useState(true);

 useEffect(() => {
 // 사이드 이펙트 실행
 setLoading(true);
 fetch(`/api/users/${userId}`)
 .then((res) => res.json())
 .then((data) => {
 setUser(data);
 setLoading(false);
 });
 }, [userId]); // userId가 변경될 때만 실행

 if (loading) return <p>로딩 중...</p>;
 if (!user) return <p>사용자를 찾을 수 없습니다.</p>;

 return (
 <div>
 <h2>{user.name}</h2>
 <p>{user.email}</p>
 </div>
 );
}

의존성 배열 패턴

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

 // 1. 마운트 시 1회만 실행
 useEffect(() => {
 console.log("컴포넌트 마운트");
 }, []);

 // 2. 특정 값 변경 시 실행
 useEffect(() => {
 console.log("count 변경:", count);
 }, [count]);

 // 3. 매 렌더링마다 실행 (의존성 배열 생략)
 useEffect(() => {
 console.log("렌더링됨");
 });

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

클린업 함수

컴포넌트 언마운트 시 또는 이펙트 재실행 전에 정리 작업을 수행합니다.

Claude Code Hooks - 이벤트 타입, 자동 린팅, 조건부 실행 설정

Mon, 16 Feb 2026 13:03:00 +0900

Hooks 시스템 개요

Claude Code의 Hooks는 도구 실행의 특정 시점에 자동으로 쉘 명령을 실행할 수 있는 자동화 메커니즘입니다. 파일을 편집할 때마다 자동으로 린팅을 실행하거나, 세션 시작 시 프로젝트 컨텍스트를 로딩하거나, 특정 도구 호출 후 알림을 보내는 등 다양한 자동화가 가능합니다.

Hooks는 개발 워크플로우를 크게 개선할 수 있습니다. 반복적인 작업을 자동화하고, 코드 품질을 즉각적으로 검증하며, 작업 흐름을 방해하지 않으면서도 필요한 체크를 수행할 수 있습니다.

Hook 이벤트 타입

Claude Code는 네 가지 주요 이벤트 타입을 제공합니다.

Hooks on Korobopolly's Dev Blog