#React

리액트의 전통적인 가상 DOM 리렌더링 한계를 넘어, 세밀한 값 변화 추적(Fine-grained Reactivity)을 통해 컴포넌트 단위 리렌더링 없이 UI를 초고속 업데이트하는 Signal 기반 상태 관리의 원리와 실무 적용 가이드.

React 19에 추가된 Actions 기능을 보며 그동안 지저분하게 관리하던 비동기 Form 전송과 로딩 상태를 어떻게 깔끔하게 바꿀 수 있는지, 그리고 왜 이렇게 변화했는지에 대한 나의 이해와 실무 적용기.

Vercel AI SDK를 써서 Next.js에서 스트리밍 AI 채팅을 만드는 방법을 정리했다. useChat 훅, Server Actions, 프로바이더 전환, 도구 통합까지 실제 코드로 한 번에 설명한다.

AI Agent를 만들 때 반복적으로 등장하는 핵심 패턴 세 가지—Tool Use, ReAct, Chain of Thought—를 실제 TypeScript 코드와 함께 정리했다. 이 패턴을 이해하면 Agent 설계가 훨씬 명확해진다.

결제 플로우의 상태를 if문과 boolean 플래그로 관리하다 버그 지옥에 빠졌다. XState의 상태 머신으로 불가능한 상태를 원천 차단한 경험.

Uncle Bob의 Clean Architecture를 프론트엔드에 그대로 적용하면 과도한 복잡도가 생긴다. 실전에서 통하는 수준으로 다듬은 프론트엔드 레이어 분리 전략을 정리했다.

테스트에서 fetch를 직접 모킹하거나, axios를 vi.mock()으로 교체하다가 실제 API와 차이가 생겨 고생한 적 있다. MSW는 네트워크 레벨에서 요청을 인터셉트해서 그런 문제를 근본적으로 해결한다. 설정부터 Vitest, Storybook 통합까지 정리했다.

프론트엔드 테스트를 처음 도입하면서 겪은 시행착오. Vitest와 Testing Library 조합으로 React 컴포넌트를 테스트하는 실전 패턴을 정리했다.

HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.

Redux가 너무 복잡해서 Zustand로 바꿨는데, 보일러플레이트가 90% 줄었다. 근데 제대로 쓰려면 알아야 할 패턴이 있었다.

SSR 페이지가 데이터 로딩 때문에 3초간 빈 화면을 보여주고 있었다. Streaming SSR로 준비된 부분부터 먼저 보여주니 체감 속도가 극적으로 개선됐다.

API 라우트 만들고, fetch 호출하고, 로딩 상태 관리하고... 폼 하나 처리하는 데 너무 많은 코드가 필요했는데, Server Actions로 획기적으로 줄었다.

Server Component에서 함수를 props로 전달했더니 에러가 났다. 직렬화 경계를 이해하고 나니 RSC의 진짜 패턴이 보였다.

번들 크기가 2MB를 넘어가면서 초기 로딩이 5초나 걸렸다. Lazy Loading과 Code Splitting으로 필요한 코드만 불러오니 2초로 줄었다.

React 앱이 느린 이유를 찾지 못해 코드만 뒤지고 있었는데, React DevTools의 Profiler와 Components 탭이 범인을 바로 찾아줬다.

검색창에 글자 하나 칠 때마다 API 콜이 날아가고, 스크롤할 때마다 이벤트가 폭주하는 문제를 디바운스와 스로틀로 해결한 이야기.

컴포넌트 하나에서 에러가 났는데 전체 페이지가 흰색이 됩니다. `react-error-boundary`로 에러를 격리하고, 우아한 폴백 UI를 보여주는 방법.

기능 추가할 때마다 늘어나는 번들 사이즈, 그대로 두면 사용자는 떠납니다. Code Splitting, Tree Shaking, Dynamic Import로 JS 다이어트하는 실제 기법.

`useEffect`와 `useState`로 범벅된 비대해진 컴포넌트. Custom Hook으로 로직을 분리하여 UI와 비즈니스 로직을 깔끔하게 나누는 실제 리팩토링 가이드.

습관적으로 모든 변수에 `useMemo`를 감싸고 있나요? 그게 오히려 성능을 망치고 있습니다. 메모이제이션 비용과 올바른 최적화 타이밍.

전역 상태 관리를 위해 Redux 대신 Context API를 선택했습니다. 하지만 `UserContext`에 모든 정보를 담자마자 앱 전체가 리렌더링되기 시작했습니다. Context 분리(Splitting) 전략.

`window.addEventListener('scroll')`로 무한 스크롤을 구현하면 성능이 박살 납니다. Intersection Observer API로 리팩토링하여 CPU 사용량을 90% 줄이는 방법.

React 개발 초기, 데이터를 5단계 깊이로 전달하다가 멘붕에 빠진 경험을 공유합니다. Prop Drilling이 왜 유지보수의 적인지, 그리고 Context API, Composition(합성), Zustand를 사용해 이 지옥에서 우아하게 탈출하는 3가지 실제 패턴을 정리합니다.

React에서 DOM에 직접 접근해야 할 때 useRef를 사용하는 방법과 주의사항, 그리고 forwardRef와 useImperativeHandle을 이용한 고급 패턴까지 완벽하게 정리했습니다.

React의 데이터 흐름은 단방향(부모->자식)이지만, 가끔은 거꾸로 명령을 내려야 할 때가 있습니다. useImperativeHandle과 forwardRef를 사용해 캡슐화를 유지하면서 자식의 함수를 호출하는 법을 정리해봤습니다.

컴포넌트가 사라진 후 setState를 호출해서 생기는 메모리 누수 경고 해결

부모에서 전달한 props가 undefined로 나와서 앱이 크래시되는 문제 해결

React에서 클로저가 오래된 값을 참조해서 생긴 버그와 해결 방법

useEffect 의존성 배열 때문에 무한 루프에 빠졌던 경험과 해결 방법

비동기 통신의 함정, 경쟁 상태(Race Condition)를 해결하는 과정을 담았습니다. 플래그 변수부터 AbortController까지, 탭 전환 시 발생하는 버그까지 잡는 법.

React의 setState가 비동기로 동작해서 겪었던 삽질과 해결 과정. 사학과 출신 창업자가 겪은 React 상태 관리의 미스터리를 풉니다.

React에서는 잘 돌아가던 코드가 Next.js로 옮기자마자 'window is not defined' 에러를 뿜으며 폭발했습니다. Next.js의 SSR/Hydration 원리를 통해 이 에러가 발생하는 근본적인 이유를 파헤치고, useEffect, typeof 체크, Dynamic Import 등 3가지 확실한 해결책을 제시합니다.

서버 컴포넌트를 클라이언트 컴포넌트 안에 import 했더니, DB 연결이 끊기고 에러가 폭발했습니다. Next.js App Router의 핵심인 'Composition Pattern'을 구멍 뚫린 도넛에 비유해 설명하고, Context Provider를 올바르게 분리하는 방법을 정리해봤습니다.

Next.js 13 App Router를 처음 쓸 때 가장 많이 하는 실수인 'use client 남발'을 막는 방법을 소개합니다. 서버 컴포넌트와 클라이언트 컴포넌트의 경계(Boundary)를 명확히 이해하고, 성능을 지키면서 인터랙션을 구현하는 실제 패턴을 다룹니다.

회원가입 후 프로필 이미지를 올리는 간단한 로직이었습니다. 그런데 왜 가끔 'User Not Found' 에러가 뜰까요? 자바스크립트의 비동기 처리와 Promise Waterfall 문제를 해결한 과정을 공유합니다.

사용자가 '앱이 느리다', '고장 났다'고 느끼는 진짜 이유는 API 속도가 아니라 불친절한 UI 때문입니다. 덜덜거리며 깜빡이는 화면 대신 스켈레톤 UI를 도입하고, alert() 창 대신 우아한 에러 처리를 구현하여 UX를 개선한 경험을 공유합니다.

React 콘솔에 뜨는 'unique key prop' 경고, 귀찮아서 index로 때우셨나요? 그 사소한 습관이 입력 폼 데이터를 뒤죽박죽으로 만들고 사용자를 미치게 만듭니다. Virtual DOM의 동작 원리와 함께 왜 index를 key로 쓰면 안 되는지, 제 '삽질' 경험을 통해 파헤칩니다.

서비스 런칭 일주일 만에 '작업하던 거 다 날아갔어요!'라는 항의 메일을 받았습니다. 원인은 JWT 토큰 만료. 보안과 편의성 사이에서 줄타기하며 배운 Refresh Token 전략, Axios Interceptor 구현, 그리고 보안 사고를 막기 위한 저장소 선택 기준을 공유합니다.

개발 중에 코드를 수정했는데 브라우저가 반응이 없나요? 새로고침을 백만 번 하다가 지쳐서 찾아낸 HMR(Hot Module Replacement)의 원리와 고장 원인, 그리고 해결 방법을 '노가다 개발자'의 시선으로 정리했습니다.

싱글 페이지 애플리케이션(SPA)의 SEO 문제를 해결하기 위해 등장한 SSR. 그리고 정적 생성(SSG)과 점진적 재생성(ISR)의 진화. 이제는 서버 컴포넌트(RSC) 시대.

React에서 자식 컴포넌트에 ref를 전달하는 방법이 왜 그렇게 복잡할까요? props로 ref를 전달하려다 실패한 경험부터, forwardRef를 사용하여 우아하게 DOM에 접근하는 법, useImperativeHandle을 통해 필요한 메서드만 노출하는 캡슐화 패턴, 그리고 TypeScript 제네릭과 함께 사용하는 고급 기법까지 상세히 다뤄봤습니다.

대용량 폼에서 입력 지연을 해결하는 디바운싱과 최적화 기법

리액트가 혁신이었던 이유. 진짜 DOM 조작이 느린 이유(Reflow/Repaint)와 Virtual DOM의 '더블 버퍼링' 전략, 그리고 React Fiber가 가져온 혁명.

컴포넌트마다 지저분하게 널려있는 로딩/에러 처리를 우아하게 삭제하는 법. 선언적 UI가 가져다주는 평화.

게시판에 달린 댓글 하나 때문에 관리자 계정이 탈취당했습니다. XSS(Cross-Site Scripting)의 3가지 유형(Stored, Reflected, DOM)과 React/Next.js 환경에서의 구체적인 방어법(HTML 이스케이프, CSP, 쿠키 보안)을 예제와 함께 깊이 있게 다룹니다.

React의 영원한 숙제, 상태 관리. 할아버지 컴포넌트에서 손자 컴포넌트로 데이터를 줄 때 왜 전역 상태(Redux, Zustand)를 써야 할까?

웹이 앱처럼 부드러워진 비결(SPA)과 옛날 방식(MPA)의 장단점. 그리고 이 둘을 합친 넥스트(Next.js)의 등장.

진짜 집을 부수고 다시 짓는 건 비쌉니다. 설계도(가상돔)에서 미리 그려보고 바뀐 부분만 공사하는 '똑똑한 리모델링'의 기술.

Custom Hook은 React의 가장 강력한 무기지만, 잘못 사용하면 오히려 독이 됩니다. 단순히 로직을 옮겨 적는 것을 넘어, '상태(State)'와 '이펙트(Effect)'를 분리하고 재사용 가능한 'Headless UI' 패턴을 설계하는 방법을 심도 있게 다룹니다.

React나 Next.js 프로젝트에서 `.module.css`를 사용할 때 클래스 이름이 해시값으로 바뀌어 스타일이 적용되지 않는 문제, 겪어보셨나요? CSS Modules의 작동 원리인 'Scoping' 개념부터 `composes`를 활용한 스타일 상속, 그리고 TypeScript와 함께 쓸 때의 팁까지 완벽하게 정리했습니다.

Context API를 사용할 때마다 앱이 느려지는 경험, 해보셨나요? Provider의 Value가 바뀔 때 모든 하위 컴포넌트가 리렌더링되는 근본적인 이유인 '객체 참조' 문제와 React reconciler의 작동 방식을 분석합니다. 이를 막기 위한 3가지 솔루션(State 분리, Memoization, Dispatch 분리)과 Zustand/Recoil 같은 외부 라이브러리로의 마이그레이션 기준을 명확히 제시합니다.

React에서 `count && <Component />`를 썼을 때 의도치 않게 숫자 0이 화면에 출력되는 현상, 다들 겪어보셨죠? JavaScript의 단락 평가(Short-Circuit Evaluation)와 Falsy 값의 특성 때문에 발생하는 이 버그의 원인을 심층 분석하고, 3가지 확실한 해결책(비교 연산자, 이중 부정, 삼항 연산자)과 React Native에서의 크래시 위험성까지 상세히 다룹니다.

Next.js 13 이상 App Router 환경에서 가장 빈번하게 마주치는 에러 중 하나입니다. 클라이언트 컴포넌트('use client')에 async 키워드를 붙이면 왜 에러가 발생하는지, React의 렌더링 메커니즘 관점에서 깊이 있게 분석하고, 이를 해결하기 위한 3가지 핵심 디자인 패턴(Container-Presenter, useEffect, React Query)을 상세한 코드 예제와 함께 정리해봤습니다.

React 성능 최적화의 첫걸음은 렌더링 규칙을 정확히 이해하는 것입니다. 부모 컴포넌트가 업데이트될 때 자식 컴포넌트의 불필요한 렌더링을 막는 React.memo, useMemo, Context API 최적화, 그리고 React 19 Compiler의 미래를 정리합니다.

React나 Vue 프로젝트를 빌드해서 배포했는데, 홈 화면은 잘 나오지만 새로고침만 하면 'Page Not Found'가 뜨나요? CSR의 원리와 서버 설정(Nginx, Apache, S3)을 통해 이를 해결하는 완벽 가이드.