Laravel Inertia - Links

링크

Inertia 앱 내에서 다른 페이지로의 링크를 생성할 때는 일반적으로 Inertia <Link> 컴포넌트를 사용합니다. 이 컴포넌트는 표준 앵커(<a>) 링크를 둘러싼 가벼운 래퍼로, 클릭 이벤트를 가로채고 전체 페이지 새로고침을 방지합니다. 이를 통해 애플리케이션이 로드된 후 싱글 페이지 앱 경험을 제공합니다.

링크 생성하기

Inertia 링크를 생성하려면 Inertia <Link> 컴포넌트를 사용하세요. 이 컴포넌트에 제공된 모든 속성은 기본 HTML 태그로 전달됩니다.

import { Link } from '@inertiajs/vue3'

<Link href="/">Home</Link>

기본적으로 Inertia는 링크를 앵커(<a>) 요소로 렌더링합니다. 그러나 as 속성을 사용하여 태그를 변경할 수 있습니다.

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button" type="button">로그아웃</Link>

// 렌더링 예시...
<button type="button">로그아웃</button>

POST/PUT/PATCH/DELETE 앵커(<a>) 링크 생성은 "새 탭/창에서 링크 열기" 접근성 문제를 야기하기 때문에 권장되지 않습니다. 대신, <button>과 같은 더 적절한 요소를 사용하는 것을 고려해보세요.

메소드

Inertia 링크 요청에 대한 HTTP 요청 메소드를 method 속성을 사용하여 지정할 수 있습니다. 링크의 기본 메소드는 GET이지만, method 속성을 사용하여 링크를 통한 POST, PUT, PATCH, DELETE 요청을 수행할 수 있습니다.

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button">로그아웃</Link>

데이터

POST 또는 PUT 요청을 할 때 요청에 추가 데이터를 추가하려면 data 속성을 사용하세요. 제공된 데이터는 object 또는 FormData 인스턴스일 수 있습니다.

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" method="post" :data="{ foo: bar }">저장</Link>

사용자 정의 헤더

headers 속성을 사용하여 Inertia 링크에 사용자 정의 헤더를 추가할 수 있습니다. 그러나 서버와 상태를 통신하기 위해 Inertia가 내부적으로 사용하는 헤더는 우선 순위를 가지므로 덮어쓸 수 없습니다.

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" :headers="{ foo: bar }">저장</Link>

브라우저 히스토리

replace 속성을 사용하면 브라우저의 히스토리 동작을 지정할 수 있습니다. 기본적으로 페이지 방문은 히스토리에 새 상태(window.history.pushState)를 추가하지만, replace 속성을 true로 설정하면 현재의 히스토리 상태를 대체(window.history.replaceState)하는 방문으로 변경됩니다. 이는 방문이 새로운 히스토리 상태를 스택에 추가하는 대신 현재 히스토리 상태를 대체하게 됩니다.

import { Link } from '@inertiajs/vue3'

<Link href="/" replace>Home</Link>

상태 보존

preserve-state 속성을 사용하면 페이지 컴포넌트의 로컬 상태를 보존할 수 있습니다. 이는 페이지 컴포넌트의 전체 렌더링을 방지합니다. preserve-state 속성은 폼을 포함한 페이지에서 특히 유용하며, 입력 필드를 수동으로 다시 채울 필요가 없으며 포커스된 입력을 유지할 수 있습니다.

import { Link } from '@inertiajs/vue3'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>검색</Link>

스크롤 보존

preserve-scroll 속성을 사용하면 Inertia가 페이지 방문시 자동으로 스크롤 위치를 초기화하는 것을 방지할 수 있습니다.

import { Link } from '@inertiajs/vue3'

<Link href="/" preserve-scroll>Home</Link>

스크롤 위치 관리에 대한 자세한 정보는 scroll management 문서를 참조하세요.

부분 리로드

only 속성을 사용하여 페이지의 props(데이터) 중 일부만 서버에서 후속 방문시 검색하도록 지정할 수 있습니다.

import { Link } from '@inertiajs/vue3'

<Link href="/users?active=true" :only="['users']">활성 사용자 표시</Link>

이 주제에 대한 자세한 정보는 partial reloads 완전한 문서를 참조하세요.

활성 상태

현재 페이지를 기준으로 탐색 링크에 활성 상태를 설정하는 것이 종종 바람직합니다. Inertia를 사용할 때, page 객체를 검사하고 page.url 및 page.component 속성에 대한 문자열 비교를 수행하여 이를 달성할 수 있습니다.

import { Link } from '@inertiajs/vue3'

// URL 정확한 일치...
<Link href="/users" :class="{ 'active': $page.url === '/users' }">사용자</Link>

// 컴포넌트 정확한 일치...
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">사용자</Link>

// URL 시작 부분 일치 (/users, /users/create, /users/1 등)...
<Link href="/users" :class="{ 'active': $page.url.startsWith('/users') }">사용자</Link>

// 컴포넌트 시작 부분 일치 (Users/Index, Users/Create, Users/Show 등)...
<Link href="/users" :class="{ 'active': $page.component.startsWith('Users') }">사용자</Link>

정확한 일치 비교(===), startsWith() 비교(페이지의 부분 집합을 일치시키는 데 유용) 또는 정규 표현식을 사용하여 더 복잡한 비교를 수행할 수 있습니다.

이 접근 방식을 사용하면 클래스 이름 설정에만 국한되지 않습니다. 활성 상태에 대한 다른 링크 텍스트나 활성 상태를 나타내는 SVG 아이콘과 같은 마크업을 조건부로 렌더링하는 데 이 기술을 사용할 수 있습니다.