Async React는 무엇? — React Conf 2025 이슈

• Async React Demo는 React Conf 2025에서 발표된 비동기 React의 미래 아키텍처를 보여주는 실험 프로젝트.

• 실제 데모: https://async-react.dev/

주된내용

• 추가 API 없이도 Async React의 가능성을 보여주는 예시

• React의 핵심 영역을 비동기 전환(transition)과 서스펜스(suspense)로 통합:

  • Routing: 전환이 기본 적용 → startTransition 불필요

  • Data Fetching: 서스펜스를 기본 사용

  • Design Components: action props로 비동기 호출 자동 처리 + 낙관적 업데이트(optimistic update) 내장

• 네트워크 디버거 내장

  • <150ms → 동기처럼 즉각 반응

  • 150ms → 자동 로딩 상태 표시, 비동기 버그 방지

예시 코드

• Login:

  export default function Login() {
    const router = useRouter();
    const [fields, setFields] = useState(initialFieldData);
  
    async function submitAction() {
      await login(fields.username, fields.password);
      await prefetchLessons();
      router.navigate("/");
    }
    return (
      <Design.LoginForm fields={fields} setFields={setFields}>
        <Design.Button action={submitAction}>Login</Design.Button>
      </Design.LoginForm>
    );
  }

  • 빠른 네트워크: 즉시 전환

  • 느린 네트워크: 프리패칭 및 서스펜스로 부드럽게 대체

  • 참고 영상

Async React Working Group

• React 팀이 공식적으로 “Async React Working Group” 출범

• React를 Async-first 프레임워크로 전환하는 논의 진행 중

• 참여: https://github.com/reactwg/async-react/discussions

의미

• React 19 이후의 핵심 변화 방향성 예고

• 기존 제품 코드가 명시적 비동기 관리 없이도 자연스럽게 동작하도록 설계

• UX 품질 향상과 개발자 단순화를 동시에 달성하는 시도