React

useDeferredValue 와 useTransition 차이

useDeferredValue는 상태 값의 지연 렌더링을 처리하고 useTransition은 함수 실행과 연관된 작업들을 비동기적으로 처리합니다. React의 비동기 렌더링 기능 을 활용하여 성능 최적화와 사용자 경험 개선에 기여합니다.1. useDeferredValue상태 값(state)의 업데이트를 지연시킵니다.사용 사례: 상태 값이 즉시 변경되더라도, 비동기 작업이 완료될 때까지 렌더링을 지연 처리하고 싶을 때 사용합니다.작동 방식:특정 상태 값이 실제 값보다 늦게 업데이트되도록 만들어 렌더링을 지연시킵니다.React의 비동기 렌더링을 활용하여 성능을 최적화합니다.컴포넌트 로딩 구현import { Suspense, useState, useDeferredValue } from 'react';expor..

React 19 Data Caching (map, React Query, swr)

Map 객체를 활용한 데이터 캐싱요청했던 URL과 데이터를 Map에 저장하므로 동일한 요청은 서버에 다시 호출하지 않고, 저장된 데이터를 반환합니다.data.jsimport { axios } from "./axios.js";let cache = new Map();export function fetchData(url) { if (!cache.has(url)) { cache.set(url, getData(url)); } return cache.get(url);}async function getData(url) { if (url.startsWith("/search?q=")) { return await getSearchResults(url.slice("/search?q=".length)); ..

React Suspense와 use로 빈 데이터 문제 해결하기

부모 컴포넌트가 서버 데이터를 요청하고 이를 자식 컴포넌트로 내려주는 경우, 데이터가 로드되기 전에 자식 컴포넌트가 빈 상태나 기본값으로 렌더링될 수 있습니다. 이는 불필요한 useEffect 사용이나, 자식 컴포넌트에서 동일 데이터를 다시 요청해야 하는 비효율적인 상황을 초래합니다. Suspense와 use를 활용하면, 데이터가 준비될 때까지 로딩 컴포넌트를 표시하고, 데이터를 수신한 후에 자식 컴포넌트를 렌더링하는 방식으로 이 문제를 해결할 수 있습니다.Suspense란?비동기 데이터가 로드될 때까지 컴포넌트 렌더링을 일시 중단하고, 로딩 중임을 표시하는 UI를 보여주는 기능입니다. fallback 속성은 로딩 중에 보여줄 컴포넌트를 지정합니다.use란?Promise를 처리하고 데이터를 동기적으로 사..

React 19 useTransition을 활용한 Axios 데이터 로딩과 상태 업데이트

useTransition 은 시간이 걸리는 비동기 작업(예: 데이터 요청, 상태 업데이트)을 낮은 우선순위로 처리하여 UI가 멈추지 않고 계속 반응하여 사용자 경험을 향상시킬 수 있습니다.예제 코드: useTransition을 사용한 비동기 상태 업데이트1. App.jsx//App.jsximport { useState, useTransition } from "react";import Employees from "./Employees.jsx";function App() { const [id, setId] = useState(0); return ( 부서 검색 setId(Number(e.target.value))} /> ..

React 19의 useTransition을 활용한 비동기 상태 업데이트와 UI 반응성 향상

useTransition 은 시간이 걸리는 비동기 작업(예: 데이터 요청, 상태 업데이트)을 낮은 우선순위로 처리하여 UI가 멈추지 않고 계속 반응하여 사용자 경험을 향상시킬 수 있습니다.예제 코드: useTransition을 사용한 비동기 상태 업데이트1. App.jsximport { useState, useTransition } from "react";import Item from "./Item.jsx";import Total from "./Total.jsx";import { updateQuantity } from "./data.js";function App() { const [quantity, setQuantity] = useState(1); const [isPending, startTransi..

React 19 useTransition vs React 18 pending 처리 : 로딩 상태 관리의 차이점

💡React 19의 useTransition은 비동기 업데이트를 우선순위가 낮은 작업으로 처리하여 UI 반응성을 유지하면서도 로딩 작업을 백그라운드에서 진행할 수 있습니다. 이로 인해 사용자 경험이 개선되고, 더 부드러운 로딩 처리와 상호작용을 제공합니다.React 18에서의 pending 처리React 18에서 pending 상태를 처리하는 가장 일반적인 방법은 Suspense를 사용하는 것입니다. Suspense는 비동기적으로 데이터를 로드할 때 로딩 중임을 나타내기 위해 컴포넌트 트리에서 로딩 상태를 감싸는 데 사용됩니다. 그러나, 로딩 상태가 길어지면 사용자 경험을 저하시킬 수 있습니다. 예를 들어, Suspense 내부에서 로딩 중임을 나타내는 UI를 만들 때, 로딩 시간을 관리하는 것은 여전..

[React19] React 19 ref와 React 18 forwardRef 비교

💡React는 컴포넌트의 DOM 참조를 관리하기 위해 ref를 제공합니다. React 18과 19 버전에서 forwardRef와 ref의 사용 방식에는 몇 가지 차이점이 있습니다. 아래에서 각 버전의 주요 특징을 설명하고, 코드 예제를 통해 차이점을 명확히 보여드리겠습니다.React 18의 forwardRef특징forwardRef는 함수형 컴포넌트에서 부모가 전달한 ref를 자식 컴포넌트의 DOM 요소에 연결하는 데 사용됩니다.주로 HOC(High-Order Component) 또는 재사용 가능한 컴포넌트를 만들 때 유용합니다.React 18에서는 ref를 전달하기 위해 React.forwardRef로 감싸야 하며, 이 과정에서 반드시 두 번째 매개변수로 ref를 수동으로 받아야 합니다.예제import..

Unrecognized extension value in extension set ([object Object]).

💡 Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.CodeMirror 같은 하나의 라이브러리에 여러 확장프로그램을 사용하는 경우 동일한 패키지가 여러 인스턴스로 로드될 때 발생하는 에러입니다. 해당 글은 @codemirror/state 패키지를 다루고 있지만 위 상황과 동일한 모든 문제점에 대해 해결방안이 될 수 있습니다.1. 중복 패키지 확인# npm ls [중복이 일어난 패키지]npm ls @codemirror/state여러..

React Typescript Interface Tuple Generic

💡 공식 문서에서 Tuple 타입은 Interface가 아닌 Type으로 선언하여 사용을 추천하지만 Interface로 사용하는 방법에 대한 궁금점을 해소하기 위해 작성한다. * Tuple 타입은 Type으로 선언하여 사용하길 바랍니다. Tuple을 Interface가 아닌 Type으로 선언해 사용하는 이유 인터페이스(Interface)는 객체 타입을 정의 혹은 상속, 확장하여 사용할 수 있어 사용을 추천하지만 타입(Type)처럼 원시 타입 및 튜플 타입을 정의할 수 없습니다. 하지만 아래의 사용법과 같은 방법으로 사용은 할 수 있습니다. Documentation - Advanced Types Advanced concepts around types in TypeScript www.typescriptlan..

React Labs React 19 - Memoization, useFormState

💡 2024년 2월 15일 React Labs에서 나온 React 19에 대한 게시글의 요약 및 정리를 제 주관적으로 작성하였습니다. 문제점 있을 시 지적해주시면 감사하겠습니다. React Labs: What We've Been Working On – February 2024 – React The library for web and native user interfaces react.dev Memo React의 수동 Memoization 제거되고 자동 Memoization 시행으로 코드 복잡성 및 추가 작업 불필요하게 되었습니다. (이미 작동되고 있는 Memoization 하위 호환성은 유지됨) React는 상태가 변경될 때 때때로 너무 많이 다시 렌더링할 수 있습니다. React 초기부터 이러한 경우에..