데브허브 | DEVHUB | React19 - Overview & action & useActionStateReact19 - Overview & action & useActionState
- React 19의 '액션'은 서버 액션(Next.js/Remix 등 서버 컴포넌트 프레임워크용)과 클라이언트 액션으로 나뉘며, 클라이언트 액션은 폼 제출 시
preventDefault 없이 폼 데이터를 직접 처리할 수 있게 한다. 🚀
- 서버 액션은 TRPC(TypeScript Remote Procedure Call)와 유사한 방식으로 작동하여, 브라우저에서 서버 함수를 직접 호출함으로써
fetch API 사용을 줄이고 개발 편의성을 높인다. 🔗
- '프리로딩' 기능은 페이지 로딩 전에 필요한 CSS, JS, 이미지 등을 미리 가져와 사용자 경험을 개선하고 초기 화면 로딩 속도를 단축시킨다. ⚡
startTransition이 비동기 트랜지션을 지원하게 되어, 비동기 작업 중에도 UI 업데이트를 더욱 부드럽게 처리할 수 있게 되었다. 🔄
- 새로운
use 훅은 컨텍스트나 프로미스의 값을 컴포넌트 내에서 직접 읽을 수 있게 하여, 데이터 처리 및 컨텍스트 사용 방식을 간소화한다. 🎣
useOptimistic 훅은 서버 응답을 기다리지 않고 UI를 즉시 업데이트(낙관적 업데이트)하여 사용자에게 더 빠르고 반응적인 경험을 제공하며, 실패 시 롤백 메커니즘을 지원한다. ✨
- 컴포넌트 내에서
<title> 및 <meta> 태그와 같은 문서 메타데이터를 직접 제어할 수 있게 되어, 동적인 SEO 및 소셜 공유 정보 관리가 용이해졌다. 🏷️
useActionState는 상태, 팬딩 상태, 액션 로직을 하나의 훅으로 통합하여 폼 제출 및 기타 액션 처리를 극도로 간소화하는 강력한 리듀서 형태의 훅이다. 🎯
- 리액트 컴파일러는 현재 RC(Release Candidate) 단계로 실무 사용이 가능하지만, 아직 SWC를 지원하지 않아 바벨을 통한 컴파일이 필요하다. 🛠️
- 액션은
FormData 객체를 직접 받아 preventDefault 없이 폼 데이터를 처리하고, 폼 입력값을 자동으로 초기화하여 폼 처리 로직을 대폭 간소화한다. 📝