전체 글 (36) 썸네일형 리스트형 [React 19] useFormStatus로 더 똑똑한 폼 UI 만들기 들어가며폼을 다루다 보면 로딩 상태 관리가 늘 골치 아프죠?버튼은 비활성화하고, 스피너는 보여주고... 이런 보일러플레이트 코드에 지치셨다면,React 19의 `useFormStatus`가 여러분의 구원자가 될 거예요! 😊 useFormStatus란? 🤔`useFormStatus`는 React의 Form Action과 함께 사용되는 훅으로, 폼의 제출 상태를 자동으로 추적합니다.더 이상 로딩 상태를 수동으로 관리할 필요가 없어요! 기본 사용법 📝```tsximport { useFormStatus } from 'react-dom'; function SubmitButton() { const { pending, data, method } = useFormStatus(); return ( .. [React 19] useOptimistic으로 낙관적 UI 구현하기 - 좋아요 버튼 UX 개선하기 들어가며몇 달 전, React Query로 낙관적 UI를 구현하면서 꽤나 고민했던 기억이 있습니다.그런데 React 19에서 소개된 useOptimistic을 보고 "아, 이거였구나!" 하는 깨달음을 얻었어요.오늘은 제가 겪었던 문제를 React 19의 새로운 훅으로 어떻게 더 우아하게 해결할 수 있는지 이야기해보려 합니다! 😊문제 상황: 느린 좋아요 버튼 🐢인스타그램 스타일의 좋아요 기능을 구현하면서 마주쳤던 문제는 다음과 같았어요:서버 응답을 기다리느라 버튼 반응이 느림 (1-2초)연속 클릭 시 처리가 까다로움사용자 경험이 매끄럽지 않음useOptimistic으로 해결하기 ⚡1. 기본 구현function LikeButton({ postId }: { postId: string }) { const .. [React 19] useActionState로 서버 상태 관리하기 들어가며React 19에서 새롭게 소개된 useActionState는 서버 액션의 상태를 우아하게 관리할 수 있게 해주는 강력한 훅입니다.React Query(TanStack Query)에 익숙하신 분들이라면 더욱 반가우실 것 같네요! 😊useActionState란? 🤔useActionState는 서버 액션의 전체 생명주기를 관리하는 훅으로, 다음과 같은 상태를 제공합니다:pending: 액션 실행 중 여부error: 발생한 에러 정보data: 성공 시 반환된 데이터기본 사용법 📝import { useActionState } from 'react';// 서버 액션 정의async function submitComment(formData: FormData) { 'use server'; const c.. 이전 1 2 3 4 ··· 12 다음
