react19

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