React on Korobopolly's Dev Blog

React E2E 테스트 - Playwright 설정, Locator, 네트워크 모킹, CI 통합

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

E2E 테스트는 실제 사용자 관점에서 애플리케이션을 검증합니다. 이번 글에서는 Playwright를 활용한 React 애플리케이션 E2E 테스트 작성법을 알아봅니다.

E2E 테스트란

테스트 피라미드

소프트웨어 테스트는 세 가지 레벨로 나뉩니다.

 /\
 / \ E2E 테스트 (적음, 느림, 비용 높음)
 /____\
 / \ 통합 테스트 (중간)
 /________\
 / \ 단위 테스트 (많음, 빠름, 비용 낮음)
 /____________\

단위 테스트 (Unit Test):

개별 함수, 컴포넌트 테스트
빠르고 격리된 환경
예: sum(1, 2) === 3

통합 테스트 (Integration Test):

React 상태 관리 - Context API, Provider 패턴, Redux vs Zustand 비교

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

Props drilling 문제를 겪어보신 적 있나요? 컴포넌트가 깊어질수록 상태를 여러 단계에 걸쳐 전달해야 하는 문제가 발생합니다. 이번 글에서는 전역 상태 관리 아키텍처 패턴과 실전 Context 조합 전략, 그리고 프로젝트 규모에 맞는 상태 관리 솔루션 선택 방법을 알아봅니다.

상태 관리의 필요성

Props Drilling 문제

중간 컴포넌트들이 실제로 사용하지 않는 props를 단순히 아래로 전달만 하는 상황입니다.

// Props Drilling 예시
function App() {
 const [user, setUser] = useState(null);

 return <Layout user={user} setUser={setUser} />;
}

function Layout({ user, setUser }) {
 return (
 <div>
 <Header user={user} setUser={setUser} />
 <Main user={user} />
 </div>
 );
}

function Header({ user, setUser }) {
 return <UserMenu user={user} setUser={setUser} />;
}

function UserMenu({ user, setUser }) {
 // 실제로 사용하는 곳은 여기
 return user ? (
 <button onClick={() => setUser(null)}>로그아웃</button>
 ) : (
 <button onClick={() => setUser({ name: '홍길동' })}>로그인</button>
 );
}

중간 컴포넌트들은 user와 setUser를 직접 사용하지 않지만 전달만 하고 있습니다. 이것이 Props Drilling 문제입니다.

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

핵심 파일 설명: