Laravel Inertia - Manual visits

Manual visits 수동 방문

링크를 생성하는 것 외에도, JavaScript를 통해 프로그래밍 방식으로 Inertia 방문/요청을 수동으로 수행할 수 있습니다. 이는 router.visit() 메소드를 통해 이루어집니다.

import { router } from '@inertiajs/vue3'

router.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  onCancelToken: cancelToken => {},
  onCancel: () => {},
  onBefore: visit => {},
  onStart: visit => {},
  onProgress: progress => {},
  onSuccess: page => {},
  onError: errors => {},
  onFinish: visit => {},
})

그러나 일반적으로 router.visit()의 단축 요청 메소드를 사용하는 것이 더 편리합니다. 이러한 메소드는 router.visit()과 동일한 옵션을 공유합니다.

import { router } from '@inertiajs/vue3'

router.get(url, data, options)
router.post(url, data, options)
router.put(url, data, options)
router.patch(url, data, options)
router.delete(url, options)
router.reload(options) // 현재 URL 사용

reload() 메소드는 현재 페이지의 데이터를 새로고침할 때 호출하기에 적합한 간편한 단축 메소드로, preserveState와 preserveScroll을 모두 true로 자동 설정합니다.

메소드

수동 방문을 할 때 method 옵션을 사용하여 요청의 HTTP 메소드를 get, post, put, patch 또는 delete로 설정할 수 있습니다. 기본 메소드는 get입니다.

import { router } from '@inertiajs/vue3'

router.visit(url, { method: 'post' })

라라벨(Laravel)에서 put 또는 patch를 통한 파일 업로드는 지원되지 않습니다. 대신 post를 통해 요청을 하고, _method 필드를 put 또는 patch로 설정합니다. 이를 폼 메소드 스푸핑이라고 합니다.

데이터

요청에 데이터를 추가하려면 data 옵션을 사용하세요.

import { router } from '@inertiajs/vue3'

router.visit('/users', {
  method: 'post',
  data: {
    name: 'John Doe',
    email: 'john.doe@example.com',
  },
})

편의를 위해 get(), post(), put(), patch() 메소드는 모두 두 번째 인수로 data를 받습니다.

import { router } from '@inertiajs/vue3'

router.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com',
})

사용자 정의 헤더

headers 옵션을 사용하여 요청에 사용자 정의 헤더를 추가할 수 있습니다.

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  headers: {
    'Custom-Header': 'value',
  },
})

인터시아가 서버와 상태를 통신하기 위해 내부적으로 사용하는 헤더는 우선 순위를 가지므로 덮어쓸 수 없습니다.

파일 업로드

파일을 포함하는 방문/요청을 할 때, 인터시아는 자동으로 요청 데이터를 FormData 객체로 변환합니다. 요청이 항상 FormData 객체를 사용하도록 하려면 forceFormData 옵션을 사용할 수 있습니다.

import { router } from '@inertiajs/vue3'

router.post('/companies', data, {
  forceFormData: true,
})

파일 업로드에 대한 자세한 정보는 파일 업로드 문서를 참조하세요.

브라우저 히스토리

방문을 할 때 인터시아는 자동으로 브라우저 히스토리에 새 항목을 추가합니다. 그러나 replace 옵션을 true로 설정하여 현재 히스토리 항목을 대체할 수도 있습니다.

import { router } from '@inertiajs/vue3'

router.get('/users', { search: 'John' }, { replace: true })

동일한 URL로 수행된 방문은 자동으로 replace를 true로 설정합니다.

상태 보존

기본적으로 동일한 페이지로의 페이지 방문은 새로운 페이지 컴포넌트 인스턴스를 생성합니다. 이는 폼 입력값, 스크롤 위치, 포커스 상태 등의 로컬 상태가 손실됨을 의미합니다.

그러나 일부 상황에서는 페이지 컴포넌트 상태를 보존할 필요가 있습니다. 예를 들어, 폼 제출 시 서버에서 폼 유효성 검사에 실패하더라도 폼 데이터를 보존해야 합니다.

preserveState 옵션을 true로 설정하여 인터시아에 컴포넌트의 상태를 보존하도록 지시할 수 있습니다.

import { router from '@inertiajs/vue3'

router.get('/users', { search: 'John' }, { preserveState: true

 })

preserveState 옵션은 응답에 따라 지연 평가될 수 있으며, 이는 preserveState 옵션에 콜백을 제공하여 이루어집니다.

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  preserveState: (page) => Object.keys(page.props.errors).length,
})

편의를 위해 post, put, patch, delete, reload 메소드는 기본적으로 preserveState 옵션을 true로 설정합니다.

스크롤 보존

페이지 간 탐색 시 인터시아는 기본적으로 문서 본문의 스크롤 위치를 맨 위로 재설정합니다. 그러나 preserveScroll 옵션을 사용하여 이 동작을 비활성화할 수 있습니다.

import { router } from '@inertiajs/vue3'

router.visit(url, { preserveScroll: true })

응답에 따라 preserveScroll 옵션을 지연 평가할 수도 있습니다.

Vue 2 Vue 3 React Svelte

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  preserveScroll: (page) => Object.keys(page.props.errors).length,
})

이 기능에 대한 자세한 정보는 스크롤 관리 문서를 참조하세요.

부분 리로드

only 옵션을 사용하여 동일한 페이지로의 후속 방문 시 서버에서 props(데이터)의 일부분만 요청할 수 있습니다. 이를 통해 애플리케이션이 페이지가 새로고침에 관심이 없는 데이터를 검색할 필요가 없게 되어 효율성이 향상됩니다.

import { router } from '@inertiajs/vue3'

router.visit('/users', { search: 'John' }, { only: ['users'] })

이 기능에 대한 자세한 정보는 부분 리로드 문서를 참조하세요.

방문 취소

방문을 취소하려면, 인터시아가 onCancelToken() 콜백을 통해 방문 전에 자동으로 생성하고 제공하는 취소 토큰을 사용할 수 있습니다.

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  onCancelToken: (cancelToken) => (this.cancelToken = cancelToken),
})

// 방문 취소...
this.cancelToken.cancel()

방문이 취소되면 onCancel() 및 onFinish() 이벤트 콜백이 실행됩니다.

이벤트 콜백

Inertia 의 글로벌 이벤트 외에도, Inertia 는 방문별 이벤트 콜백을 제공합니다.

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onCancel: () => {},
  onFinish: visit => {},
})

onBefore() 콜백에서 false를 반환하면 방문이 취소됩니다.

import { router } from '@inertiajs/vue3'

router.delete(`/users/${user.id}`, {
  onBefore: () => confirm('이 사용자를 삭제하시겠습니까?'),
})

onSuccess() 및 onError() 콜백에서 프로미스를 반환할 수도 있습니다. 이 경우 "finish" 이벤트는 프로미스가 해결될 때까지 지연됩니다.

import { router } from '@inertiajs/vue3'

router.post(url, {
  onSuccess: () => {
    return Promise.all([
      this.doThing(),
      this.doAnotherThing()
    ])
  }
  onFinish: visit => {
    // doThing() 및 doAnotherThing()이 완료될 때까지 이 콜백은 호출되지 않습니다.
  },
})