좋습니다. cacheSignal은 바로 직전에 본 cache의 “수명”과 연결되는 API입니다.한 문장으로 먼저 잡으면:cacheSignal()은 현재 React cache가 더 이상 필요하지 않을 때 abort되는 AbortSignal을 제공합니다.즉 cache()로 시작한 비동기 작업을 React cache의 생명주기에 맞춰 취소할 수 있게 하는 API입니다.1. 가장 기본적인 형태import { cache, cacheSignal } from 'react';const getData = cache(async () => { const signal = cacheSignal(); const response = await fetch('/api/data', { signal, }); return re..

좋습니다. 이번 페이지의 cache는 React Server Components에서 여러 컴포넌트가 같은 데이터 요청이나 비싼 계산 결과를 공유하도록 만드는 메모이제이션 API입니다.가장 먼저 중요한 제한부터 잡겠습니다.cache는 React Server Components 전용입니다. 클라이언트 컴포넌트에서 일반적인 메모이제이션 용도로 쓰는 API가 아닙니다. (React)1. 기본 형태import { cache } from 'react';const cachedFn = cache(fn);예를 들어:import { cache } from 'react';const getMetrics = cache(calculateMetrics);이제:getMetrics(data);를 처음 호출하면:cache miss→ c..

좋습니다. addTransitionType은 바로 직전에 배운 을 한 단계 더 세밀하게 제어하는 API입니다.한 문장으로 먼저 잡으면:addTransitionType은 “이번 Transition이 왜 발생했는지”에 이름표를 붙이는 API입니다.예를 들어 둘 다 페이지 전환이지만:뒤로 가기앞으로 가기검색 결과 갱신폼 제출은 시각적으로 다르게 처리하고 싶을 수 있습니다. 이때 Transition에 "navigation-back", "navigation-forward" 같은 원인(type)을 붙이고, 이 그 type을 보고 다른 애니메이션을 선택하게 만들 수 있습니다. (React)1. 가장 기본적인 사용법공식 문서의 기본 패턴은 다음입니다.import { startTransition, addTransit..

좋습니다. 이번 페이지의 act는 React 컴포넌트 테스트에서 “업데이트가 다 처리된 뒤 검증하도록” 만드는 테스트 헬퍼입니다.앱 코드에서 쓰는 API가 아니라 테스트 코드용 API라는 점부터 잡으면 됩니다. 공식 문서의 표현대로 act는 pending React updates를 적용한 후 assertion할 수 있게 도와줍니다. (React)1. 오늘의 핵심기본 형태는 이겁니다.import { act } from 'react';await act(async () => { // render // click // state update // async update});// 여기서 assertionexpect(...);핵심은:사용자 한 번의 상호작용에 의해 발생할 수 있는 React 업데이트들을 ac..

좋습니다. 이번 페이지의 은 React 상태 변화에 맞춰 UI의 “이전 모습 → 다음 모습”을 브라우저가 자연스럽게 애니메이션하도록 연결해주는 컴포넌트입니다. 단순한 CSS transition wrapper가 아니라, React의 Transition, Suspense, Activity와 브라우저 View Transition API를 연결하는 경계라고 이해하면 정확합니다. ( – React">React)1. 가장 먼저 잡아야 할 핵심기본 형태는 아주 단순합니다.import { ViewTransition } from 'react'; 하지만 이것만 쓴다고 모든 setState가 자동으로 애니메이션되는 것은 아닙니다.공식 문서의 중요한 caveat가 있습니다.일반적인 즉시 setState 업데이트는 을 활성화..

좋습니다. 이번 페이지의 핵심은 가 “보이지 않게 숨기되, 상태와 DOM은 보존하고, Effects는 정리하는” 새로운 종류의 UI 경계라는 점입니다.React 19.3 공식 문서 기준으로 는 자식 UI를 숨겼다가 다시 보여줄 때 이전 state와 DOM 상태를 복원할 수 있게 해줍니다. 동시에 hidden 상태에서는 Effects를 cleanup하고, 보이지 않는 UI의 렌더링 우선순위도 낮춥니다. (React)1. 기본 형태import { Activity } from 'react';function App() { return ( );}mode는 두 가지입니다."visible""hidden"생략하면 기본값은 "visible"입니다. (React)보통은 조건에 따라 이렇게 씁니..