한우의 개발일기

React의 Hydration 동작 원리 분석서버 사이드 렌더링(SSR)을 사용하는 React 애플리케이션을 개발해 본 경험이 있다면, "hydration"이라는 용어를 들어봤을 것입니다. 이 글에서는 React의 hydration이 무엇인지, 어떻게 작동하는지, 그리고 내부적으로 어떤 과정을 통해 처리되는지 심층적으로 알아보겠습니다.위 그림은 React의 Fiber 트리와 DOM 트리 간의 관계를 보여줍니다. Hydration 과정에서 React는 이 두 트리를 매칭시켜 기존 DOM 노드를 재사용합니다. 이 과정이 어떻게 이루어지는지 자세히 살펴보겠습니다.Hydration이란 무엇인가?"Hydration"은 '수분 공급'이라는 의미를 가진 단어로, React에서는 이 용어가 매우 적절하게 사용됩니다. ..

React의 lazy() 함수 이해하기: 동작 원리와 활용법React로 대규모 애플리케이션을 개발할 때 마주치는 가장 큰 문제 중 하나는 초기 로딩 시간입니다. 사용자가 애플리케이션에 처음 접속할 때 모든 코드를 한 번에 다운로드하면 초기 로딩 시간이 길어져 사용자 경험이 저하됩니다. 이런 문제를 해결하기 위해 React는 lazy() 함수를 제공합니다.React.lazy()란?React.lazy()는 코드 분할(Code Splitting)을 쉽게 구현할 수 있게 해주는 React의 내장 기능입니다. 코드 분할은 애플리케이션을 여러 개의 작은 번들로 나누고, 필요한 시점에만 해당 번들을 로드하는 기술입니다.import React, { Suspense, lazy } from 'react';// 일반적인 임..

React key 속성의 모든 것: 내부 작동 원리와 최적화 방법React를 사용하다 보면 자주 마주치는 경고 중 하나가 있습니다:Warning: Each child in a list should have a unique "key" prop.리스트를 렌더링할 때 각 항목에 key를 추가하지 않으면 발생하는 이 경고는 왜 생기는 걸까요? React 공식 문서에서는 개념적인 설명을 제공하지만, 이번에는 실제로 key가 React 내부에서 어떻게 작동하는지 깊이 들여다보겠습니다.내부 동작의 핵심: reconcileChildrenArray()React는 컴포넌트를 업데이트할 때 '재조정(reconciliation)' 과정을 거칩니다. 리스트의 경우 이 과정은 reconcileChildrenArray() 함수에서..

React Suspense 분석하기React로 개발할 때 가장 까다로운 작업 중 하나는 비동기 데이터를 로딩하는 동안 사용자에게 적절한 로딩 상태를 표시하는 것입니다. 이를 위해 React 팀은 Suspense라는 강력한 기능을 도입했습니다. 이 글에서는 Suspense가 무엇인지, 실제 애플리케이션에서 어떻게 활용할 수 있는지, 그리고 내부적으로 어떻게 동작하는지 살펴보겠습니다.목차Suspense 소개React Query와 함께 사용하기SWR과 함께 사용하기useTransition과 함께 활용하기Suspense의 내부 동작 원리Suspense의 고급 패턴마무리Suspense 소개Suspense는 컴포넌트가 렌더링되기 전에 무언가를 "기다릴" 수 있게 해주는 React의 기능입니다. 주로 두 가지 싱황에..

React ErrorBoundary 이해하기: 내부 동작 원리와 활용법React 애플리케이션을 개발하다 보면 예기치 않은 에러를 마주치게 됩니다. 컴포넌트가 렌더링 과정에서 에러가 발생하면 어떻게 될까요? React 16에서 도입된 ErrorBoundary로 이러한 문제를 해결할 수 있습니다. 이 글에서는 ErrorBoundary의 개념부터 내부 동작 원리, 그리고 실제 활용법까지 알아보겠습니다.ErrorBoundary란 무엇인가?ErrorBoundary는 React 컴포넌트 트리에서 자식 컴포넌트에서 발생하는 JavaScript 에러를 캐치하고, 에러 발생 시 폴백 UI를 보여주는 컴포넌트입니다. 간단히 말하면, React 컴포넌트를 위한 선언적인 try...catch 문이라고 볼 수 있습니다.Some..