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>;
}

클린업 함수

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

React 시작하기 - JSX, 컴포넌트, Props, State, 이벤트 처리

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

React란?

React는 Meta(구 Facebook)에서 개발한 UI 라이브러리입니다. 컴포넌트 기반 아키텍처로 복잡한 UI를 독립적이고 재사용 가능한 조각으로 나누어 개발할 수 있습니다.

React의 핵심 특징

컴포넌트 기반: UI를 독립적인 컴포넌트로 분리하여 관리
선언적 UI: 상태에 따라 UI가 자동으로 업데이트
Virtual DOM: 효율적인 렌더링으로 성능 최적화
단방향 데이터 흐름: 예측 가능한 데이터 관리
풍부한 생태계: Next.js, React Native 등 확장 가능

프로젝트 생성

Vite로 React 프로젝트 생성

# Vite로 React + TypeScript 프로젝트 생성
npm create vite@latest my-react-app -- --template react-ts

# 프로젝트 디렉토리로 이동
cd my-react-app

# 의존성 설치
npm install

# 개발 서버 시작
npm run dev

프로젝트 구조

my-react-app/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ ├── App.tsx
│ ├── App.css
│ ├── main.tsx
│ └── index.css
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

핵심 파일 설명:

프론트엔드 on Korobopolly's Dev Blog