React

transition과 concurrent render

서론 React의 useTransition hook은 React 18에서 도입된 concurrent rendering의 핵심 기능 중 하나로, 상태 업데이트를 우선순위가 낮은 업데이트로 처리할 수 있게 해준다. 이를 통해 UI의 응답성을 유지하면서 백그라운드에서 느린 렌더링 작업을 처리할 수 있다. transition은 lane 시스템을 활용해 time slicing을 가능하게 하며, 사용자 입력 같은 우선순위가 높은 업데이트를 먼저 처리하고 오래된 transition 결과를 폐기함으로써 deferred UI를 가능하게 한다.Concurrent Rendering과 Transition의 동작 원리 React 18에서 도입된 concurrent rendering은 time slicing을 통해 장시간의 렌더..

React 톺아보기 4. reconciler (2)

function performWorkOnRootViaSchedulerTask( root: FiberRoot, didTimeout: boolean,): RenderTaskFn | null { if (hasPendingCommitEffects()) { root.callbackNode = null; root.callbackPriority = NoLane; return null; } // Flush any pending passive effects before deciding which lanes to work on, // in case they schedule additional work. const originalCallbackNode = root.callbackNode; co..

React 톺아보기 3. scheduler (1)

reconciler에서 work를 microtask를 통해 schedule할때, scheduleCallback함수를 통해 performWorkOnRootViaSchedulerTask를 schedule하는 것을 보았다.const newCallbackNode = scheduleCallback( schedulerPriorityLevel, performWorkOnRootViaSchedulerTask.bind(null, root), ); react의 reconciler는 react element를 fiber로 확장시키는(mount, reconcile) 역할을 한다. 해당 fiber를 dom으로 이식하는 work를 schedule하는 것은 scheduler package가 하게 되는데, 이번..

React 톺아보기 2. reconciler (1)

react dom에서 render를 호출하면 reconciler의 updateContainer 함수가 호출되는 것을 보았다. function updateContainerImpl( rootFiber: Fiber, lane: Lane, element: ReactNodeList, container: OpaqueRoot, parentComponent: ?React$Component, callback: ?Function,): void { /* */ const update = createUpdate(lane); update.payload = {element}; // 반환된 root는 FiberRootNode const root = enqueueUpdate(rootFiber, update..

React 톺아보기 - 1. ReactDom

import React from 'react'import ReactDOM from 'react-dom/client'import App from './App'const rootElement = document.getElementById('root')const root = ReactDOM.createRoot(rootElement!)root.render( )먼저 시작은 ReactDOM.createRoot이다.리액트로 앱을 만들 때는, HTML 파일 안에 있는 특정 DOM element를 React의 루트로 삼아야 한다. 일반적으로는 처럼 HTML의 최상단에 위치한 element를 사용하지만, 꼭 그럴 필요는 없다.리액트는 앱 전체를 통째로 구성하는 경우가 많지만 페이지 일부만 리액트로 구현할 수도..

React에서 batch 처리와 렌더링 주기: 무한 재렌더링

서론 React는 효율적인 UI 업데이트를 위해 가상 DOM과 상태 관리 시스템을 사용한다. 그러나 상태 업데이트와 렌더링 과정에서 발생하는 Reconciliation은 비용이 큰 작업이다. 이를 최소화하려면 React의 batch 처리와 렌더링 주기를 잘 이해하고 활용해야 한다. 특히 React 18부터 도입된 비동기 배치 처리는 성능 최적화를 위한 핵심 도구이지만, 이 동작을 잘못 이해하면 무한 재렌더링과 같은 문제를 초래할 수 있다.1. React에서 Reconciliation과 Batch 처리의 중요성 Reconciliation은 React가 변경된 가상 DOM을 실제 DOM에 반영하기 위해 차이를 계산하는 과정이다. 이는 매우 비용이 크므로, React는 setState 호출을 최소한의 렌더링 ..

React에서 경로 최적화를 통한 성능 향상

0. 서론  React는 컴포넌트 기반의 UI 라이브러리로, 빠르고 효율적인 사용자 경험을 제공하는 것을 목표로 한다. 하지만 복잡한 애플리케이션에서는 성능이 저하되는 문제가 발생할 수 있다. React의 성능에 가장 큰 영향을 미치는 요소 중 하나는 reconciliation 과정이다. 특히, virtual DOM을 새로 생성하고 diffing 알고리즘을 통해 이전 DOM과 비교하는 과정은 가장 비용이 많이 드는 작업이다. 따라서 컴포넌트 재렌더링을 줄이는 것이 성능 최적화의 핵심이다. 이 글에서는 React에서 컴포넌트의 재렌더링과 이를 최적화하기 위한 전략에 대해 구체적으로 알아본다.1. React에서 컴포넌트 재렌더링 React에서 재렌더링은 render phase에서 컴포넌트의 UI를 다시 계산..

React Hook이란 무엇인가

서론 React Hook은 컴포넌트 계층 구조를 변경하지 않고 상태 관련 로직을 재사용할 수 있도록 도와주는 기능이다. 이를 통해 컴포넌트의 로직을 더 작은 단위로 나눌 수 있으며, React를 클래스 없이 사용할 수 있게 한다. 또한 Hook은 Custom Hook을 통해 특정 로직을 추상화하고 여러 컴포넌트에서 재사용할 수 있도록 만들어준다.Hook을 쓰는 이유 Hook이 도입된 이유는 여러 가지다. 우선 stateful한 로직을 컴포넌트 간에 재사용하기 어려운 문제를 해결하기 위함이다. Hook을 사용하면 상태 로직을 컴포넌트에서 분리하여 독립적으로 테스트하고 재사용할 수 있다. 또한 복잡한 컴포넌트를 더 이해하기 쉽게 만드는 데에도 유용하다. 기존의 lifecycle method를 기준으로 컴포넌..