React는 매 업데이트마다 개발자의 생산성과 사용자 경험을 개선하기 위해 새로운 기능을 도입해왔습니다. 특히 React 18과 19에서는 비동기 작업 관리와 UI 반응성을 향상시키는 여러 Hook이 추가되었습니다. 이번 글에서는 useId, useTransition, 그리고 useOptimistic과 같은 최신 Hook을 살펴보고, 이를 통해 어떻게 효율적인 비동기 처리가 가능한지 탐구해 보겠습니다.useIduseId는 React 18에서 고유한 ID 생성을 위해 도입된 Hook입니다. 서버와 클라이언트에서 동일한 ID를 생성하여 렌더링의 일관성을 보장하며, 클라이언트-서버 간 불일치를 방지할 수 있습니다.아래는 useId를 사용하여 고유 ID를 생성하고, 폼의 label과 input을 연결하는 예제입..

웹 개발을 하다 보면, 이미지에서 주된 색상을 추출해 텍스트나 배경 등 디자인 요소에 활용된 경우가 종종 있습니다.  예를 들어, 서버에서 OpenAPI 목록을 제공받아 GPT와 Gemini라는 두 가지 항목을 렌더링 한다고 했을 때를 가정하고 해 보겠습니다.서버에서는 보통 아래 데이터형식으로 보내줍니다.[ { title: 'GPT', logoUrl: 'https://...' }, { title: 'Gemini', logoUrl: 'https://...' }] 하지만 디자인을 구현하기 위해 이러한 색상 정보를 서버에서 매번 제공받는 것은 비용과 성능 면에서 비효율적일 수 있습니다.이미지가 많은 사이트에서는 색상 데이터를 저장하고 관리하는 것이 번거로울 뿐만 아니라, 서버 요청이 많아질수록 성능에도..

이 글에서는 화면 흔들림을 방지하고, 자연스러운 스크롤 경험을 제공하기 위한 방법을 설명합니다. 웹 페이지를 만들다 보면 종종 컴포넌트 내에 스크롤이 필요한 경우가 있습니다. 컴포넌트 안에서 스크롤을 최대로 내리면 부모 컴포넌트의 스크롤이 함께 움직이는 문제가 발생할 수 있습니다. 이를 방지하기 위해 HTML 및 Body 태그에 `overflow: hidden` 속성을 적용할 수 있지만, 이로 인해 스크롤바가 사라지면서 화면 크기가 변동되어 사용자에게 불편함을 줄 수 있습니다. 이 글에서는 이러한 문제를 해결하기 위한 방법을 소개합니다.  아래 코드는 리액트(React)에서 이 문제를 해결하기 위한 예제입니다. useEffect 훅을 사용하여 조건에 따라 바디의 패딩을 조정하여 화면 흔들림을 방지합니다...

살펴보기React Router는 라우팅을 위한 강력한 도구입니다. 라우팅을 사용하면 애플리케이션의 구조를 분리하고, 사용자에게 다양한 페이지를 제공할 수 있습니다.React Router DOM v6에 새로 생긴 기능인 loader를 활용하면 라우트와 관련된 데이터를 더 쉽게 관리할 수 있습니다. loader는 라우트의 데이터를 로드하기 위한 함수입니다. 이 함수에서 로드된 데이터는 useLoaderData와 useRouteLoaderData 훅을 사용하여 컴포넌트에서 사용할 수 있습니다. 이 글에서는 useLoaderData와 useRouteLoaderData의 차이점과 사용법에 대해 알아보겠습니다. 예제 코드useLoaderDatauseLoaderData는 라우트의 로더에서 로드된 데이터에 접근하는 데..

FontFace란?Web API의 FontFace는 CSS에서 사용할 수 있는 외부 글꼴을 로드하고 관리하는 역할을 합니다. FontFace를 사용하면 다음과 같은 상황에서 유용하게 사용할 수 있습니다. 1. 웹사이트에 특정 글꼴을 사용하고 싶은 경우2. 웹사이트에서 지원하지 않는 글꼴을 사용하고 싶은 경우3. 사용자가 웹사이트에서 특정 글꼴을 선택하는 경우 해당 글꼴을 동적으로 로드하는 경우 예제 코드// MyComponent.jsimport React from 'react';const MyComponent = () => { // fonts 배열은 커스텀 폰트 정보를 담고 있습니다. // ex) 서버에서 불러온 font 정보들 const fonts = [ { family: 'Cust..

요약// Badconst queryClient = new QueryClient();queryClient.invalidateQueries();// Goodconst queryClient = useQueryClient();queryClient.invalidateQueries();   React Query에 대한 소개React Query는 데이터 관리와 캐싱을 위한 강력한 도구로, 애플리케이션에서 데이터를 효율적으로 관리하는 데 큰 도움을 줍니다. 그 중요한 부분 중 하나는 QueryClient 인스턴스의 적절한 관리와 사용입니다. React Query의 QueryClient는 앱 전반에서 데이터 캐싱과 관련된 주요 작업을 처리합니다. 이러한 인스턴스는 앱 내에서 하나의 전역적 상태로 유지되어야 하는데, 그 ..