React Router Data Mode: Parte 6 – Actions, formularios y mutaciones

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React Router를 사용하는 웹 개발자, 특히 데이터 처리 및 폼 제출 로직 구현에 관심 있는 중급 이상 개발자

핵심 요약

• 컴포넌트를 사용해 폼 제출 시 자동으로 action 함수를 트리거할 수 있음
• action 함수는 POST 요청을 처리하고 데이터를 변환/저장한 후 redirect를 통해 URL 재정의 가능
• useNavigation 훅을 통해 폼 제출 상태(submitting, loading)를 실시간으로 모니터링하여 중복 제출 방지 가능
• request.formData()를 활용해 폼 데이터를 쉽게 추출 및 처리 가능

섹션별 세부 요약

1. Action 함수 설정

• src/AppRoutes.tsx에 action 속성을 추가해 라우트별 데이터 처리 로직 정의
• 예시: action: newContactAction으로 newContactAction 함수를 라우트와 연결
• ActionFunctionArgs 인터페이스를 사용해 request 객체를 처리

2. 폼 데이터 처리

• 컴포넌트를 사용해 폼 제출 시 자동으로 action 실행
• request.formData()로 폼 필드(firstName, lastName, 등) 데이터 추출
• method를 POST로 검증 후 데이터 생성 로직(createContact) 실행

3. 리디렉션 처리

• createContact 성공 시 redirect 헬퍼를 사용해 /contacts/${newContactResponse.id}로 이동
• redirect는 UI 자동 갱신 및 URL 변경을 유도

4. 폼 상태 관리

• useNavigation 훅을 통해 submitting/loading 상태 감지
• isSubmitting 및 isLoading 변수로 특정 폼 상태를 식별
• disabled 상태를 통해 중복 제출 방지

결론

• action 함수는 데이터 변환, 저장, 리디렉션을 통합적으로 처리하며 useNavigation으로 폼 상태를 실시간으로 관리하는 것이 UX 향상에 핵심
• redirect를 사용해 폼 제출 후 UI 자동 갱신 및 URL 변경을 구현
• request.formData()와 useNavigation의 조합으로 안정적이고 직관적인 폼 처리 로직 구현 가능