한우의 개발일기

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

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