⚛️React 기술 문서

CRA가 아닌 Vite로 시작하는 이유, 가상돔의 본질, 그리고 JSX의 진짜 모습을 파헤칩니다.

상태(State)가 일반 변수와 어떻게 다른지, 왜 비동기 안에서 옛날 값을 보게 되는지(클로저 함정) 파헤칩니다.

객체와 배열 상태를 다룰 때 왜 스프레드 문법(...)이 필요한지, 불변성을 지키지 않으면 일어나는 참사를 배웁니다.

상태를 무조건 최상위(App)로 끌어올릴 때 발생하는 렌더링 폭탄의 원인과, 상태를 알맞은 위치에 배치(Colocation)하는 5년 차의 설계법을 배웁니다.

useEffect를 단순히 컴포넌트 마운트/언마운트 시점에 실행되는 생명주기 API로 오해할 때 발생하는 문제와 그 진정한 역할(동기화)을 배웁니다.

lint 경고를 무시하고 의존성 배열을 속일 때 발생하는 무한 루프 사태와, 올바른 함수/객체 의존성 주입 방법에 대해 분석합니다.

빠르게 컴포넌트를 이탈하거나 비동기 요청 타이밍이 꼬였을 때 옛날 데이터가 화면을 덮어버리는 버그(Race Condition)를 파괴하는 Cleanup 기술을 배웁니다.

항상 최신 값을 유지해야 하지만 화면이 리렌더링되는 것은 원치 않을 때, useRef가 어떤 역할을 하는지 내부 원리와 함께 파헤칩니다.

useMemo와 useCallback을 무분별하게 남발할 때 발생하는 메모리 오버헤드와, 진정한 최적화의 타이밍을 배우는 가이드입니다.

useMemo 남발 대신, 리액트의 본질인 Children(합성)과 상태 격리(Colocation)를 이용해 렌더링 폭포수를 근본적으로 끊어내는 프론트엔드 최적화의 극의를 배웁니다.

Context API를 상태 관리 툴로 오해할 때 터지는 불필요한 전역 렌더링 참사를 막고 우회하는 현업 분리 기법을 다룹니다.

if문 지옥에 빠진 만능 컴포넌트의 제어권을 부모에게 돌려주어, 재사용성과 확장성을 극대화하는 '제어의 역전(IoC)' 패턴을 배웁니다.

제어의 역전을 극한으로 끌어올린 실전 레고 블록 설계 패턴. 컴포넌트들이 암묵적으로 상태를 공유하며 하나의 거대한 생태계를 이루는 마법을 목격합니다.

UI는 단 1px도 그리지 않고, 오직 '기능과 상태(뇌)'만 캡슐화하여 디자인과 로직을 완벽하게 분단시키는 최신 트렌드 Headless 패턴의 정수를 배웁니다.

React 생태계의 패러다임 변화인 서버 컴포넌트(RSC)의 의미와, use client 지시어가 클라이언트와 서버를 나누는 경계선(Boundary) 역할을 어떻게 수행하는지 총정리합니다.

로딩과 에러 처리 책임을 부모 레이어로 완벽히 떠넘기고, 자식 컴포넌트는 '데이터가 100% 존재할 때의 성공한 UI'만 남겨두는 극강의 선언적 비동기 처리 기법을 배웁니다.

React에서 Form 데이터를 다룰 때 흔히 저지르는 성능 낭비를 막기 위해, 제어 컴포넌트와 비제어 컴포넌트의 개념을 명확히 구분하고 react-hook-form이 실무 표준이 된 원리를 분석합니다.

React 18에 도입된 동시성 엔진의 진짜 의도를 파헤치고, useTransition과 useDeferredValue를 통해 메인 스레드 렌더링 렉을 양보(Yield)하는 현업의 필수 기법을 전수합니다.

Redux 하나로 모든 데이터를 욱여넣던 시대를 지나, 왜 현대 프론트엔드는 서버 데이터(TanStack Query)와 UI 데이터(Zustand)를 철저히 분리하는지 아키텍처 관점에서 해부합니다.

때로는 <button>으로, 때로는 <a> 태그나 <Link>로 자유자재로 변신하는 다형성 렌더링(as prop, Slot) 설계와, 시각장애인도 완벽히 사용할 수 있는 대기업급 컴포넌트의 비밀을 파헤칩니다.

상태(State)가 실제로 어디 보관되는지, key가 단순 목록 식별자가 아닌 '컴포넌트 주민등록번호'인 이유를 React 렌더 트리 구조로 파헤칩니다.

복붙 지옥에서 탈출하는 커스텀 훅 추출 기준부터, useAsync·useLocalStorage·useDebounce 등 실무 훅 설계 패턴까지. '훅이어야 하는가, 컴포넌트여야 하는가'의 판단 기준을 명확히 다집니다.

isSaving과 isSaved가 동시에 true가 되는 버그는 왜 생기는가? useReducer와 유한 상태 머신(FSM) 사고방식으로 '불가능한 상태 조합'을 코드 구조 자체로 차단하는 법을 배웁니다.

제네릭 컴포넌트로 any 지옥 탈출, Discriminated Union으로 불가능한 props 조합 차단, 다형성 컴포넌트의 완전한 타입 안전성까지. 실무 TypeScript 패턴을 코드로 체득합니다.

사용자가 최초 방문 시 내려받는 JavaScript 번들을 최소화하는 코드 스플리팅 전략, React.lazy와 동적 import, 그리고 Bundle Analyzer로 번들 크기 시각화까지. 실무 성능 개선의 전 과정을 다룹니다.