한우의 개발일기

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() 함수에서..

useRef 파해치기 와 이어집니다useAsync 훅 확인하기useAsync 훅 분석import { useEffect, useRef, useState } from 'react'export function useAsync( func: () => Promise | undefined | null, deps = [],) { const ref = useRef(func) ref.current = func const [value, setValue] = useState() useEffect(() => { ref.current()?.then(setValue) // eslint-disable-next-line react-hooks/exhaustive-deps }, deps) return value..

https://github.com/Bookiwi-hub/flow/blob/deep-dive/apps/reader/src/hooks/useAsync.ts위에 훅을 공부 하던중 비동기 처리를 ref 를 이용하여 위에 훅으로 사용할 수 있는 훅을 만든것을 보았는데 왜 ref를 사용하고 ref 의 동작원리를 잘 모르겠어서 ref에 대해서 공부해 보았습니다.React의 useRef() 훅 내부 동작 분석React의 훅 중 하나인 useRef()의 내부 동작 원리를 깊이 살펴보려고 합니다. React를 사용하다 보면 useRef()를 DOM 요소에 접근하거나 re-render 사이에 값을 유지하기 위해 자주 사용하게 되는데요, 이 훅이 어떻게 작동하는지 내부 메커니즘을 이해하면 더 효과적으로 활용할 수 있습니다.u..

React가 초기 마운트(최초 렌더링)의 수행과정1. Fiber Architecture에 대한 간략한 소개Fiber는 React가 App 상태의 내부 표현을 유지하는 아키텍처입니다. FiberRootNode와 FiberNode들로 구성된 트리와 같은 구조입니다. 여러 종류의 FiberNode가 있으며 그 중 일부는 DOM 노드를 가지고 있는 HostComponent입니다.React 런타임은 Fiber 트리를 유지하고 업데이트하며 최소한의 업데이트로 DOM을 동기화 하려고 하고있습니다여기서 HostComponets란??HostComponent는 React에서 실제 DOM 요소와 직접적으로 매핑되는 컴포넌트를 의미합니다. 쉽게 말해서HTML 요소들이 HostComponent입니다. 예를 들면등이 모두 Hos..