전체 글

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

AWS S3 Access Denied CopyObjectCommand

CopySource에 복사 경로 + 원본 파일명만 적었는데 Bucket 이름까지 작성해야한다.S3 예제 코드const input = { "Bucket": "destinationbucket", "CopySource": "/sourcebucket/HappyFacejpg", "Key": "HappyFaceCopyjpg"};const command = new CopyObjectCommand(input);const response = await client.send(command);작성 코드const Bucket = process.env.AMPLIFY_BUCKET;const s3 = new S3Client({ region: process.env.AWS_REGION, credentials: { acc..

Only plain objects, and a few built-ins, can be passed to Server Actions.

Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.💡상품 저장 전 서버에 이미지를 먼저 업로드 하려 했으나일반 객체가 아닌 직렬화 할 수 없는 클래스나 null 프로토타입을 가진 객체는 서버 컴포넌트로 넘기지 못한다는 에러를 받았다. 해결책 FormData클라이언트 > 서버 전송 시 데이터를 직렬화해 서버에 전달하고, 서버는 이를 역직렬화해 처리하는데 FormData는 파일과 같은 비구조적 데이터를 직접 바이너리 형태로 전송되므로 별도의 직렬화 과정이 필요하지 않습니다.수정 전const handleFileChange = async (e: Ch..

Git Rebase Commit Amend 과거 커밋 수정

💡 이전의 커밋에서 Google OAuth Secret을 코드 내부에 작성 후 커밋하여 Push Rejected 되었다. 해당 내용은 비밀이 작성된 커밋을 수정하고 푸쉬하는 과정이다.Commit ID 검색git log 확인IDEA Git Log 확인Git Project Repository 화면에서 Commits 확인Git Rebase검색된 Commit ID로 Rebase 실행하여 작성된 커밋 이전 상태로 돌아가므로 문제있는 코드를 수정한다.# ~2 : 해당 커밋에서부터 2개의 커밋 이전을 의미git rebase -i ~2# 수정할 Commit을 edit으로 변경pick 22a79af [feat] Initialize projectpick a3f5d3d [fix] Fix authentication issu..