한우의 개발일기

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 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..

useLayoutEffect vs useEffect: React 내부 동작과 실용적 차이점React 개발자라면 useEffect는 매우 친숙한 훅일 것입니다. 하지만 그의 사촌 격인 useLayoutEffect는 상대적으로 덜 사용되고 이해되는 경향이 있죠. 이 두 훅은 언뜻 보기에 비슷하지만, React 내부적으로는 상당히 다른 타이밍에 실행됩니다. 이 글에서는 두 훅의 차이점, 내부 동작 원리, 그리고 언제 어떤 훅을 사용해야 하는지 알아보겠습니다.실행 타이밍의 차이먼저 두 훅의 가장 큰 차이점은 실행 타이밍입니다:useEffect: 브라우저가 화면을 그린 후에 비동기적으로 실행됩니다.useLayoutEffect: 브라우저가 화면을 그리기 전에 동기적으로 실행됩니다.이 차이를 시각적으로 나타내면 다음..