rendering optimization 썸네일형 리스트형 React 18 useDeferredValue로 성능 최적화하기 프로젝트: tracking map 키워드: react v18, useDeferredValue, interruptible rendering, rendering blocking 상황 react 18에서 새로 나온 useDeferredValue hook을 사용해보고 장점을 알아본다. 실제 프로젝트에 적용하여 렌더링 성능 최적화를 확인한다. 해결 과정 1 먼저 useDeferredValue hook을 체험해보기 위해 간단한 코드를 작성한다. 아래 코드는 input element에 value를 입력할 때마다, boxes를 새로 연산하여 렌더링하는 코드이다. // Test.tsx import React, { useState, useDeferredValue, useMemo } from 'react'; function.. 더보기 react-window로 렌더링 성능 최적화하기 프로젝트: 채식 지도 키워드: react-window, rendering optimization 상황 매장 목록을 보여주는 UI를 구현하였는데, 매장 Row마다 각각 'button' DOM으로 구현되어있다. Next.js 프레임워크 덕분에 이미지()는 자동으로 lazy loading 되고 있어서 image 최적화 문제는 없을 것이다. 하지만 훗날 매장이 점점 많아지고 리스트가 길어짐에 따라 DOM 렌더링 성능에 문제가 생기고 화면이 끊겨보일 가능성이 있다. 그래서 사용자에게 보이는 DOM만 실제로 렌더링하는 'windowing 기법'을 써보기로 한다. 해결 방법 react 라이브러리 중 react-window라는 라이브러리를 설치한다. yarn add react-window yarn add -D @typ.. 더보기 이전 1 다음
