우리는 연락처를 추적할 수 있는 작지만 기능이 풍부한 앱을 구축할 것입니다. 데이터베이스나 다른 "프로덕션 준비" 항목이 없기 때문에 Remix에 집중할 수 있습니다. 따라오는 경우 약 30분이 소요될 것으로 예상되며, 그렇지 않으면 빠르게 읽을 수 있습니다. ![](https://remix.run/docs-images/contacts/01.webp) 👉 **이것을 볼 때마다 앱에서 무언가를 해야 한다는 의미입니다!** 나머지는 귀하의 정보와 더 깊은 이해를 위해 존재합니다. 그럼 시작해볼까요? ## 설치 👉 **기본 템플릿 생성** ```sh npx create-remix@latest --template remix-run/remix/templates/remix-tutorial ``` 이것은 꽤 기본적인 템플릿을 사용하지만 CSS 및 데이터 모델을 포함하므로 Remix에 집중할 수 있습니다. [Quick Start](https://remix.run/docs/en/main/start/quickstart)는 자세한 내용을 알고 싶은 경우 Remix 프로젝트의 기본 설정에 익숙해지는 데 도움이 될 수 있습니다. 👉 **앱 시작** ```sh # cd into the app directory cd {wherever you put the app} # install dependencies if you haven't already npm install # start the server npm run dev ``` [http://localhost:5173](http://localhost:5173/) 열고 다음과 같은 스타일이 지정되지 않은 화면을 볼 수 있어야 합니다. ![](https://remix.run/docs-images/contacts/03.webp) ## Root 경로 `app/root.tsx`에 있는 파일을 기억하세요. 이것을 우리는 "루트 경로"라고 부릅니다. 랜더링되는 UI의 첫 번째 컴포넌트이므로 일반적으로 페이지의 전역 레이아웃을 포함합니다. ## `links`가 있는 스타일시트 추가 Remix 앱의 스타일을 지정하는 방법에는 여러 가지가 있지만 Remix에 초점을 맞추기 위해 이미 작성된 일반 스타일 시트를 사용할 것이빈다. CSS 파일을 JavaScript 모듈로 직접 가져올 수 있습니다. Vite는 asset을 핑거프린트하여 빌드의 클라이언트 디렉토리에 저장하고 모듈에 공개적으로 액세스할 수 있는 href를 제공합니다. 👉 **앱 스타일 가져오기** **app/root.tsx** ```js title:app/root.tsx import type { LinksFunction } from "@remix-run/node"; // existing imports import appStylesHref from "./app.css?url"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: appStylesHref }, ]; ``` 모든 경로는 [`links`](https://remix.run/docs/en/main/route/links) 함수를 내보낼 수 있습니다. 그것들은 수집되어 `app/root.tsx` 에서 랜더링한 `` 컴포넌트로 랜더링 됩니다. 이제 앱이 다음과 같이 표시되어야 합니다. CSS를 작성할 수 있는 디자이너가 있다는 것은 확실히 좋은 일입니다. ![](https://remix.run/docs-images/contacts/04.webp) ## The Contact Route UI 사이드바 항목 중 하나를 클릭하면 기본 404 페이지가 표시됩니다. url `/contacts/1` 과 일치하는 경로를 만들어 보겠습니다. 👉 **`app/routes` 디렉터리 및 연락처 경로 모듈 만들기** ```sh mkdir app/routes touch app/routes/contacts.\$contactId.tsx ``` Remix [경로 파일 규칙](https://remix.run/docs/en/main/file-conventions/routes)에서 `.` 는 URL에 `/` 를 만들고 `$` 는 세그먼트를 동적으로 만듭니다. 다음과 같은 URL과 일치하는 경로를 만들었습니다. - `/contacts/123` - `/contacts/abc` 👉 **연락처 구성 요소 UI 추가** 그것은 단지 엘리먼트의 묶음일 뿐이며 자유롭게 복사/붙여넣기를 할 수 있습니다. **app/routes/contacts.$contactId.tsx** ```js import { Form } from "@remix-run/react"; import type { FunctionComponent } from "react"; import type { ContactRecord } from "../data"; export default function Contact() { const contact = { first: "Your", last: "Name", avatar: "https://placecats.com/200/200", twitter: "your_handle", notes: "Some notes", favorite: true, }; return (

{contact.first || contact.last ? ( <> {contact.first} {contact.last} ) : ( No Name )}{" "}

{contact.twitter ? (

{contact.twitter}

) : null} {contact.notes ?

{contact.notes}

: null}

); } const Favorite: FunctionComponent<{ contact: Pick; }> = ({ contact }) => { const favorite = contact.favorite; return ( ); }; ``` 이제 링크 중 하나를 클릭하거나 `/ contacts / 1`을 방문하면 ... 새로운 것은 없습니까? ![contact route with blank main content](https://remix.run/docs-images/contacts/05.webp) ## 중첩된 경로 및 배출구 Remix는 React Router를 기반으로 구축되었기 때문에 중첩 라우팅을 지원합니다. 자식 경로가 부모 레이아웃 내에서 랜더링되려면 부모에 [`Outlet`](https://remix.run/docs/en/main/components/outlet)을 렌더링해야 합니다. 문제를 해결하고 `app/root.tsx`를 열고 내부에 콘센트를 렌더링해 보겠습니다. 👉 **[``](https://remix.run/docs/en/main/components/outlet)랜더링** ```js title:app/root.tsx // existing imports import { Form, Links, Meta, Outlet, Scripts, ScrollRestoration, } from "@remix-run/react"; // existing imports & code export default function App() { return ( {/* other elements */}

{/* other elements */} ); } ``` ![contact route with the main content](https://remix.run/docs-images/contacts/06.webp) ## 클라이언트 측 라우팅 눈치채셨을 수도 있고 눈치채지 못하셨을 수도 있지만, 사이드바의 링크를 클릭하면 브라우저가 클라이언트 측 라우팅 대신 다음 URL에 대한 전체 문서 요청을 수행하고 있습니다. 클라이언트 측 라우팅을 사용하면 앱에서 다른 문서를 요청하지 않고도 URL을 업데이트할 수 있습니다. 대신 앱에서 새 UI를 즉시 랜더링할 수 있습니다. [``](https://remix.run/docs/en/main/components/link)로 해봅시다. 👉 **사이드바 ``를 ``로 변경합니다.** ```js title:app/root.tsx // existing imports import { Form, Link, Links, Meta, Outlet, Scripts, ScrollRestoration, } from "@remix-run/react"; // existing imports & exports export default function App() { return ( {/* other elements */} {/* other elements */} ); } ``` devtools 브라우저에서 네트워크 탭을 열어 더 이상 문서를 요청하지 않는지 확인할 수 있습니다. ## 데이터 불러오기 URL 세그먼트, 레이아웃 및 데이터는 서로 결합되지 않는 것보다 더 자주 결합됩니다(3배로?). 우리는 이미 앱에서 그것을 볼 수 있습니다. | URL Segment | Component | Data | | ---------------------------------- | ----------- | ------------------ | | / | `` | list of contacts | | contacts/:contactId 연락처/:contactId | `` | individual contact | 이러한 자연스러운 결합으로 인해 Remix에는 데이터를 경로 컴포넌트로 쉽게 가져올 수 있는 데이터 규칙이 있습니다. 데이터를 로드하는 데 사용할 API는 [`loader`](https://remix.run/docs/en/main/route/loader)와 [`useLoaderData`](https://remix.run/docs/en/main/hooks/use-loader-data)의 두 가지입니다. 먼저 루트 경로에서 `loader` 함수를 만들고 내보낸 다음 데이터를 렌더링합니다. 👉 **`app/root.tsx`에서 `loader` 함수를 내보내고 데이터를 렌더링합니다**. ```js title:app/root.tsx // existing imports import { json } from "@remix-run/node"; import { Form, Link, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, } from "@remix-run/react"; // existing imports import { getContacts } from "./data"; // existing exports export const loader = async () => { const contacts = await getContacts(); return json({ contacts }); }; export default function App() { const { contacts } = useLoaderData(); return ( {/* other elements */}

{/* other elements */}

{contacts.length ? (

{contact.first || contact.last ? ( <> {contact.first} {contact.last} ) : ( No Name )}{" "} {contact.favorite ? ( ★ ) : null}

) : (

No contacts

)}

{/* other elements */} ); } ``` 그거에요! 이제 Remix는 해당 데이터를 UI와 자동으로 동기화합니다. 이제 사이드바가 다음과 같이 표시되어야 합니다. ![](https://remix.run/docs-images/contacts/07.webp) ## Type 유추 Typescript가 맵 내부의 `contact` 유형에 대해 불평하는 것을 눈치채셨을 겁니다. `typeof loader`를 사용하여 데이터에 대한 Type 추론을 얻기 위해 빠른 주석을 추가할 수 있습니다. ```js title:app/root.tsx // existing imports & exports export default function App() { const { contacts } = useLoaderData(); // existing code } ``` ## Loader의 URL Params 👉 **사이드바 링크 중 하나를 클릭합니다.** 이전의 정적 연락처 페이지를 다시 볼 수 있지만 한 가지 차이점은 URL에 이제 레코드에 대한 실제 ID가 있다는 것입니다. ![](https://remix.run/docs-images/contacts/08.webp) `app/routes/contacts.$contactId.tsx`의 `$contactId` 부분을 기억하십니까? 이러한 동적 세그먼트는 URL의 해당 위치에 있는 동적(변경) 값과 일치합니다. URL에서 이러한 값을 "URL Params" 또는 줄여서 "params"라고 합니다. 이러한 [`params`](https://remix.run/docs/en/main/route/loader#params)는 동적 세그먼트와 일치하는 키를 사용하여 로더에 전달됩니다. 예를 들어 세그먼트의 이름은 `$contactId`이므로 값은 `params.contactId`로 전달됩니다. 이러한 매개변수는 ID로 레코드를 찾는 데 가장 자주 사용됩니다. 한 번 시도해 봅시다. 👉 **연락처 페이지에 `loader` 함수를 추가하고 `useLoaderData`를 사용하여 데이터에 액세스**합니다. ```js title:app/routes/contacts.$contactId.tsx import { json } from "@remix-run/node"; import { Form, useLoaderData } from "@remix-run/react"; // existing imports import { getContact } from "../data"; export const loader = async ({ params }) => { const contact = await getContact(params.contactId); return json({ contact }); }; export default function Contact() { const { contact } = useLoaderData(); // existing code } // existing code ``` ## Params 유효성 검사 및 Throwing 응답 ```js title:app/routes/contacts.$contactId.tsx import type { LoaderFunctionArgs } from "@remix-run/node"; // existing imports import invariant from "tiny-invariant"; // existing imports export const loader = async ({ params, }: LoaderFunctionArgs) => { invariant(params.contactId, "Missing contactId param"); const contact = await getContact(params.contactId); return json({ contact }); }; // existing code ``` 이것이 강조하는 첫 번재 문제는 파일 이름과 코드 사이에 param의 이름이 잘못되었을 수 있다는 것입니다 (파일 이름을 변경했을 수 있습니다!) Invariant는 코드에 잠재적인 문제가 있을 것으로 예상될 때 사용자 지정 메시지와 함께 오류를 발생 시키는 편리한 함수입니다. 다음으로, `useLoaderData()` 이제 연락처 또는 `null`이 있음을 알 수 있습니다(해당 ID에 대한 연락처가 없을 수 있음). 이 잠재적인 `null`은 구성 요소 코드에 번거롭고 TS 오류는 여전히 날아다니고 있습니다. 컴포넌트 코드에서 연락처를 찾을 수 없을 가능성을 고려할 수 있지만 webby가 해야 할 일은 적절한 404를 보내는 것입니다. 우리는 로더에서 그것을 할 수 있고 모든 문제를 한 번에 해결할 수 있습니다. ```js title:app/routes/contacts.$contactId.tsx // existing imports export const loader = async ({ params, }: LoaderFunctionArgs) => { invariant(params.contactId, "Missing contactId param"); const contact = await getContact(params.contactId); if (!contact) { throw new Response("Not Found", { status: 404 }); } return json({ contact }); }; // existing code ``` 이제 사용자를 찾을 수 없는 경우 이 경로의 코드 실행이 중지되고 Remix가 대신 오류 경로를 랜더링합니다. Remix의 구성 요소는 행복한 경로에만 집중할 수 있습니다. ## Data Mutations(데이터 변이) 잠시 후에 첫 번째 연락처를 만들 것이지만 먼저 HTML에 대해 이야기해 보겠습니다. Remix는 JavaScript 캄브리아기 폭팔 이전에 유일한 방법이었던 데이터 변형 프리미티브로 HTML 양식 탐색을 에뮬레이트합니다. 단순함에 속지 마십시오! Remix의 Forms는 "구식" 웹 모델의 단순성과 함께 클라이언트 랜더링 앱의 UX 기능을 제공합니다. 일부 웹 개발자에게는 익숙하지 않지만 HTML `form`은 실제로 링크를 클릭하는 것처럼 브라우저에서 navigation을 야기합니다. 유일한 차이점은 요청에 있습니다: 링크는 URL만 변경할 수 있지만 `form`은 용청 방법(`GET` vs `POST`)과 요청 본문(`POST` 양식 데이터)도 변경할 수 있습니다. 클라이언트 측 라우팅이 없으면 브라우저는 `form`의 데이터를 자동으로 직렬화하여 `POST`의 경우 요청 본문으로, `GET`의 경우 [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) 로 서버에 보냅니다. Remix는 서버에 요청을 보내는 대신 클라이언트 측 라우팅을 사용하여 경로의 [`action`](https://remix.run/docs/en/main/route/action) 함수로 보내는 것을 제외하고는 동일한 작업을 수행합니다. 앱에서 "New" 버튼을 클릭하여 테스트할 수 있습니다. Remix는 서버에 이 form navigation을 처리할 코드가 없기 때문에 405를 보냅니다. ## 연락처 만들기 Root 경로에서 `action` 함수를 내보내 새 연락처를 만들 것입니다. 사용자가 "New" 버튼을 클릭하면 양식이 루트 경로 작업에 `POST` 됩니다. ```js title:app/root.tsx // existing imports import { createEmptyContact, getContacts } from "./data"; export const action = async () => { const contact = await createEmptyContact(); return json({ contact }); }; // existing code ``` 그거에요! 계속해서 "New" 버튼을 클릭하면 목록에 새 레코드가 나타나는 것을 볼 수 있습니다. ![](https://remix.run/docs-images/contacts/11.webp) `createEmptyContact` 메소드는 이름이나 데이터 등이 없는 빈 연락처만 만듭니다. 그러나 그것은 여전히 기록을 만듭니다. > 잠깐만... 사이드바는 어떻게 업데이트 되었나요? `action` 함수는 어디에서 호출했나요? 데이터를 다시 가져오는 코드는 어디에 있습니까? `useState`, `onSubmit` 및 `useEffect`는 어디에 있습니까?! 여기에서 "구식 웹" 프로그래밍 모델이 나타납니다. `

`은 브라우저가 서버로 요청을 보내는 것을 방지하고 대신 `fetch`를 사용하여 경로의 `action` 함수로 보냅니다. 웹 의미론에서 `POST`는 일반적으로 일부 데이터가 변경되고 있음을 의미합니다. 규칙에 따라 Remix는 이 옵션을 힌트로 사용하여 `action`이 완료된 후 페이지의 데이터를 자동으로 다시 유효성 검사합니다. 사실, 모두 HTML과 HTTP일 뿐이므로 Javascript를 비활성화할 수 있으며 모든 것이 계속 작동합니다. Remix가 양식을 직렬화하고 서버에서 `fetch` 요청을 하는 대신 브라우저는 양식을 직렬화하고 문서 요청을 합니다. 거기에서 Remix는 페이지 서버 측을 랜더링하여 아래로 보냅니다. 어느 쪽이든 결국 동일한 UI 입니다. 우리는 회전하는 파비콘과 정적 문서보다 더 나은 사용자 경험을 만들 것이기 때문에 JavaScript를 계속 사용할 것입니다. ## 데이터 업데이트 새 레코드에 대한 정보를 채우는 방법을 추가해 보겠습니다. 데이터를 만들 때와 마찬가지로 [``](https://remix.run/docs/en/main/components/form)를 사용하여 데이터를 업데이트합니다. 에서 `app/routes/contacts.$contactId_.edit.tsx` 새로운 경로를 만들어 봅시다. 👉 **수정 컴포넌트 만들기** ```sh touch app/routes/contacts.\$contactId_.edit.tsx ``` `$contactId_`에서 이상한 `_` 에 유의하십시오. 기본적으로 경로는 접두사가 같은 이름을 가진 경로 내에 자동으로 중첩됩니다. 후행 `_` 를 추가하면 경로가 내부 `app/routes/contacts.$contactId.tsx` 에 중첩**되지 않습니다**. [자세한 내용은 Route File Naming](https://remix.run/docs/en/main/file-conventions/routes) 가이드를 참조 하세요 👉 **수정 페이지 UI 추가** 우리가 전에 못한 것은 없으면 자유롭게 복시/붙여넣기 할 수 있습니다. ```js import type { LoaderFunctionArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { Form, useLoaderData } from "@remix-run/react"; import invariant from "tiny-invariant"; import { getContact } from "../data"; export const loader = async ({ params, }: LoaderFunctionArgs) => { invariant(params.contactId, "Missing contactId param"); const contact = await getContact(params.contactId); if (!contact) { throw new Response("Not Found", { status: 404 }); } return json({ contact }); }; export default function EditContact() { const { contact } = useLoaderData(); return (

Name

Twitter Avatar URL Notes

</label>
      <p>
        <button type="submit">Save</button>
        <button type="button">Cancel</button>
      </p>
    </Form>
  );
}

```

이제 새 레코드를 클릭한 다음 "편집" 버튼을 클릭합니다. 우리는 새로운 경로를 보아야 합니다.
![](https://remix.run/docs-images/contacts/12.webp)
## `FormData`로 연락처 업데이트

방금 만든 편집 경로는 이미 `form`을 랜더링합니다. `action` 함수를 추가하기만 하면 됩니다. Remix는 `form`을 직렬화하고, `fetch`로 `POST`하고, 모든 데이터의 유효성을 자동으로 다시 검사합니다.

👉 **수정 라우트에 `action` 함수 추가**

```js title:app/routes/contacts.$contactId_.edit.tsx
import type {
  ActionFunctionArgs,
  LoaderFunctionArgs,
} from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
// existing imports

import { getContact, updateContact } from "../data";

export const action = async ({
  params,
  request,
}: ActionFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateContact(params.contactId, updates);
  return redirect(`/contacts/${params.contactId}`);
};

// existing code

```

양식을 작성하고 저장을 누르면 다음과 같은 내용이 표시됩니다!

## Mutation Discussion(돌연변이 토론)

😑 그것은 효과가 있었지만 여기서 무슨 일이 일어나고 있는지 전혀 모릅니다 ...

조금 파헤쳐 보자...

`contacts.$contactId_.edit.tsx`를 열고 `form` 요소를 확인합니다. 각각 이름이 있는 방식에 주목하십시오.

```js title:app/routes/contacts.$contactId_.edit.tsx
<input
  aria-label="First name"
  defaultValue={contact.first}
  name="first"
  placeholder="First"
  type="text"
/>
```

JavaScript가 없으면 form이 제출될 때 브라우저는 [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)를 만들고 서버로 보낼 때 요청 본문으로 설정합니다. 앞서 언급했듯이 Remix는 이를 방지하고 대신 [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)를 포함해 `fetch`를 사용하여 `action` 함수에 요청을 전송하여 브라우저를 에뮬레이터합니다.

`form`와 각 필드는 `formData.get(name)`을 사용하여 엑세스할 수 있습니다. 예를 들어, 위의 입력 필드가 주어지면 다음과 같이 이름과 성에 엑세스 할 수 있습니다.

```js title:app/routes/contacts.$contactId_.edit.tsx
export const action = async ({ 
	params, 
	request,
}: ActionFunctionArgs) => { 
	const formData = await request.formData(); 
	const firstName = formData.get("first"); 
	const lastName = formData.get("last"); // ... };
```

몇 가지 form 필드가 있기 때문에 [`Object.fromEntries`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)를 사용하여 모두 개체를 수집했는데, 이것이 바로 `updateContact`함수가 원하는 것입니다.

```js title:app/routes/contacts.$contactId_.edit.tsx
const updates = Object.fromEntries(formData); 
updates.first; // "Some" 
updates.last; // "Name"
```

`action`함수를 제외하고, 우리가 논의하고 있는 이러한 API 중 어느 것도 Remix에서 제공하지 않습니다. `request`, `request.formData`, `Object.fromEntries`는 모두 웹 플랫폼에서 제공됩니다.

`action`을 완료한 후 끝에 있는  [`redirect`](https://remix.run/docs/en/main/utils/redirect)을 확인합니다.

```js title:app/routes/contacts.$contactId_.edit.tsx
export const action = async ({
  params,
  request,
}: ActionFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateContact(params.contactId, updates);
  return redirect(`/contacts/${params.contactId}`);
};

```

`action`과 `loader` 함수는 모두 `Response`를 반환 할 수 있습니다. (`Request`를 받았기 때문에 의미가 있습니다!). `redirect` 헬퍼를 사용하면 앱의 위치를 변경하도록 지시하는 Response를 더 쉽게 반환할 수 있습니다.

클라이언트 측 라우팅이 없으면 `POST` 요청 후 서버가 redirect되면 새 페이지가 최신 데이터를 가져와서 랜더링됩니다. 이전에 배웠듯이 Remix는 이 모델을 에뮬레이트하고 `action` 호출 후 페이지의 데이터를 자동으로 재검증합니다. 이것이 form을 저장할 때 사이드바가 자동으로 업데이트되는 이유입니다. 추가 유효성 검사 코드는 클라이언트 측 라우팅 없이는 존재하지 않으므로 Remix에서도 클라이언트 측 라우팅과 함께 존재할 필요가 없습니다!

마지막으로 한 가지. JavaScript가 없으면 `redirect`은 일반 redirect 됩니다. 그러나 JavaScript를 사용하면 클라이언트 측 리디렉션이므로 사용자는 스크롤 위치 또는 컴포넌트 상태와 같은 클라이언트 상태를 읽지 않습니다.

## 새 레코드를 수정 페이지로 리다이렉팅

이제 redirect하는 방법을 알았으므로 수정 페이지로 redirect할 새 연락처를 만드는 작업을 업데이트 해 보겠습니다.

👉 **새 레코드의 수정 페이지로 리디렉션**

```js title:app/root.tsx
// existing imports
import { json, redirect } from "@remix-run/node";
// existing imports

export const action = async () => {
  const contact = await createEmptyContact();
  return redirect(`/contacts/${contact.id}/edit`);
};

// existing code
```

이제 "New"를 클릭하면 편집 페이지로 이동해야 합니다.
![](https://remix.run/docs-images/contacts/14.webp)
## Active 링크 스타일링

이제 많은 레코드가 있으므로 사이드바에서 어떤 레코드를 보고 있는지 명확하지 않습니다.  [`NavLink`](https://remix.run/docs/en/main/components/nav-link)를 사용하여 이 문제를 해결할 수 있습니다.

👉 **사이드바에서 `<Link>`를 `<NavLink>`로 바꿉**니다.

```js title:app/root.tsx
// existing imports
import {
  Form,
  Links,
  Meta,
  NavLink,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";

// existing imports and exports

export default function App() {
  const { contacts } = useLoaderData<typeof loader>();

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        <div id="sidebar">
          {/* existing elements */}
          <ul>
            {contacts.map((contact) => (
              <li key={contact.id}>
                <NavLink
                  className={({ isActive, isPending }) =>
                    isActive
                      ? "active"
                      : isPending
                      ? "pending"
                      : ""
                  }
                  to={`contacts/${contact.id}`}
                >
                  {/* existing elements */}
                </NavLink>
              </li>
            ))}
          </ul>
          {/* existing elements */}
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}
```

`className`에 함수를 전달하고 있습니다. 사용자가 `<NavLink to>`와 일치하는 URL에 있으면 `isActive`가 true가 됩니다. 활성화될려고 할 때(데이터가 여전히 로드 중일 때) `isPending`이 true가 됩니다. 이를 통해 사용자의 위치를 쉽게 나타낼 수 있으며 링크를 클릭했지만 데이터를 로드해야 할 때 즉각적인 피드백을 제공할 수 있습니다.
![](https://remix.run/docs-images/contacts/15.webp)

## Global Pending UI

사용자가 앱을 이동할 때 Remix는 다음 페이지를  위해 데이터를 로드하는 동안 *이전 페이지를 그대로 둡니다.* 목록 사이를 클릭할 때 앱이 약간 응답하지 않는 것 같습니다. 앱이 응답하지 않는 느낌이 들지 않도록 사용자에게 몇 가지 피드백을 제공해 보겠습니다.

Remix는 백그라운드에서 모든 상태를 관리하고 동적 웹 앱을 구축하는 데 필요한 부분을 보여줍니다. 이 경우 [`useNavigation`](https://remix.run/docs/en/main/hooks/use-navigation) 훅을 사용합니다.

👉 **`useNavigation`을 사용하여 Global Pending UI 추가**

```js title:app/root.tsx
// existing imports
import {
  Form,
  Links,
  Meta,
  NavLink,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
  useNavigation,
} from "@remix-run/react";

// existing imports & exports

export default function App() {
  const { contacts } = useLoaderData<typeof loader>();
  const navigation = useNavigation();

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        {/* existing elements */}
        <div
          className={
            navigation.state === "loading" ? "loading" : ""
          }
          id="detail"
        >
          <Outlet />
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}

```

[`useNavigation`](https://remix.run/docs/en/main/hooks/use-navigation)은 현재 내비게이션 상태를 반환합니다: `"idle"`, `"loading"` 또는 `"submitting"` 중 하나일 수 있습니다.

우리의 경우 우리가 idle 상태가 아닌 경우 앱의 주요 부분에 `"loading"` 클래스를 추가합니다. 그런 다음 CSS는 짧은 지연 후에 먼진 페이드를 추가합니다(빠른 로드르 위해 UI가 깜박이는 것을 방지하기 위해). 상단에 스피너를 표시하거나 로딩 바를 표시하는 것과 같이 원하는 모든 것을 할 수 있습니다.

## 레코드 삭제

contact 경로의 코드를 검토하면 삭제 버튼이 다음과 같은 것을 찾을 수 있습니다.

```js title:app/routes/contact.$contactId.tsx
<Form
  action="destroy"
  method="post"
  onSubmit={(event) => {
    const response = confirm(
      "Please confirm you want to delete this record."
    );
    if (!response) {
      event.preventDefault();
    }
  }}
>
  <button type="submit">Delete</button>
</Form>

```

`action`은 `"destroy"`를 가리킵니다. `<Link to>`와 같이 `Form action`은 상대 값을 가질 수 있습니다. form이 `contacts.$contactId.tsx`에서 랜더링되므로 `destroy`를 사용한 상대 작업은 클릭할 때 form을 `contacts.$contactId.destroy`에 제출합니다.

이 시점에서 삭제 버튼이 작동하도록 하기 위해 알아야 할 모든 것을 알고 있어야 합니다. 계속 진행하기 전에 한 번 시도해 볼 수 있습니까? 다음이 필요합니다.

1. 새로운 라우트
2. 해당 경로에서의 `action`
3. `app/data.ts`에서 `deleteContact`
4. 다음 장소로 `redirect`

👉 **"destroy" 라우트 모듈 만들기**

```js title:app/routes/contacts.$contactId.destroy.tsx
import type { ActionFunctionArgs } from "@remix-run/node";
import { redirect } from "@remix-run/node";
import invariant from "tiny-invariant";

import { deleteContact } from "../data";

export const action = async ({
  params,
}: ActionFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  await deleteContact(params.contactId);
  return redirect("/");
};

```

자, 레코드로 이동하여 "삭제" 버튼을 클릭합니다. 잘돼요!

😅 이 모든 것이 왜 작동하는지 여전히 혼란 스럽습니다

사용자가 제출 버튼을 클릭하면 다음을 수행합니다.

1. `<Form>`는 새 문서 `POST` 요청을 서버로 보내는 기본 브라우저 동작을 방지하는 대신 클라이언트 쪽 라우팅 및 `fetch`를 사용하여 `POST` 요청을 만들어 브라우저를 에뮬레이트합니다.
2. `<Form action="destroy">`는 `"contacts.$contactId.destroy"`의 새 경로와 일치하고 요청을 보냅니다.
3. `action`이 리다이렉트 된 후 Remix는 페이지의 데이터에 대한 모든 `loader`를 호출하여 최신 값을 가져옵니다("유효성 재검사"). `useLoaderData`는 새로운 값을 반환하고 컴포넌트가 업데이트되도록 합니다!

`form`을 추가하고, `action`을 추가하고, 나머지는 Remix가 알아서 합니다.

## Index Routes 경로 색인

앱으 로드하면 목록 오른쪽에 큰 빈 페이지가 표시됩니다.

![](https://remix.run/docs-images/contacts/17.webp)
경로에 자식이 있고 부모 경로의 path 에 있는 경우 일치하는 자식이 없기 때문에 `<Outlet>`는 랜더링할 것이 없습니다. 인덱스 경로를 해당 공간을 채우기 위한 기본 자식 경로로 생각할 수 있습니다.

👉 **루트 경로에 대한 인덱스 경로 만들기**

```sh
touch app/routes/_index.tsx
```

👉 **인덱스 구성 요소의 요소를 입력합니다.**

자유롭게 복사/붙여넣기할 수 있으며 여기에는 특별한 것이 없습니다.

```js title:app/routes/_index.tsx
export default function Index() {
  return (
    <p id="index-page">
      This is a demo for Remix.
      <br />
      Check out{" "}
      <a href="https://remix.run">the docs at remix.run</a>.
    </p>
  );
}
```

`_index` 경로 이름은 특별합니다. 사용자가 상위 경로의 정확한 경로에 있을 때 이 경로를 일치시키고 랜더링하도록 Remix에 지시하므로 `<Outlet />`에 랜더링할 다른 하위 경로가 없습니다.

짜잔! 더 이상 빈 공간이 없습니다. 대시보드, 통계, 피드 등을 인덱스 경로에 배치하는 것이 일반적입니다. 데이터 로딩에도 참여할 수 있습니다.

## 취소 버튼

편집 페이지에는 아직 아무 작업도 수행하지 않는 취소 버튼이 있습니다. 브라우저의 뒤로 버튼과 동일한 작업을 수행하기를 원합니다.

버튼에 클릭 핸들러가 필요하고 [`useNavigate`](https://remix.run/docs/en/main/hooks/use-navigate)가 필요합니다.

👉 **`useNavigate`를 사용하여 취소 버튼 클릭 핸들러 추가**

```js title:app/routes/contacts.$contactId_.edit.tsx
// existing imports
import {
  Form,
  useLoaderData,
  useNavigate,
} from "@remix-run/react";
// existing imports & exports

export default function EditContact() {
  const { contact } = useLoaderData<typeof loader>();
  const navigate = useNavigate();

return (
    <Form key={contact.id} id="contact-form" method="post">
      {/* existing elements */}
      <p>
        <button type="submit">Save</button>
        <button onClick={() => navigate(-1)} type="button">
          Cancel
        </button>
      </p>
    </Form>
  );
}
```

이제 사용자가 "Cancel" 를 클릭하면 브라우저 기록에서 한 항목이 다시 전송됩니다.

🧐 버튼에 `event.preventDefault()`가 없는 이유는 무엇입니까?

`<button type="button">` 는 중복되는 것처럼 보이지만 버튼이 양식을 제출하지 못하게하는 HTML 방법입니다.

두 가지 기능이 더 있습니다. 우리는 홈 스트레칭에 있습니다!

## `URLSearchParams` 및 `GET` 제출

지금까지 우리의 모든 대화형 UI는 URL을 변경하는 링크 또는 `action` 함수에 데이터를 게시하는 `form`이었습니다. 검색 필드는 두 가지가 혼합되어 있기 때문에 흥미롭습니다: `form`이지만 URL만 변경하고 데이터는 변경하지 않습니다.

검색 양식을 제출하면 어떻게 되는지 봅시다

👉 **검색 필드에 이름을 입력하고 Enter 키를 누릅니다.**

이제 브라우저의 URL에 [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)로 쿼리가 포함됩니다.
```
http://localhost:5173/?q=ryan
```

`<Form method="post">`가 아니기 때문에 Remix는 `FormData`를 RequestBody 대신 `URLSearchParams`로 직렬화하여 브라우저를 에뮬레이트합니다.

`loader`함수는 `request`에서 검색 매개변수에 액세스 할 수 있습니다. 이를 사용하여 목록을 필터링해 보겠습니다.

👉 **`URLSearchParams`가 있는 경우 목록을 필터링합니다.**

```js title:app/root.tsx
import type {
  LinksFunction,
  LoaderFunctionArgs,
} from "@remix-run/node";

// existing imports & exports

export const loader = async ({
  request,
}: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);
  return json({ contacts });
};

// existing code

```

![](https://remix.run/docs-images/contacts/19.webp)
이것은 `POST`가 아니라 `GET`이기 때문에 Remix는 `action`함수를 호출하지 않습니다. `GET form`을 제출하는 것은 링크를 클릭하는 것과 동일하며 URL만 변경됩니다.

이것은 또한 정상적인 페이지 탐색임을 의미합니다. 뒤로 버튼을 클릭하여 원래 위치로 돌아갈 수 있습니다.

## URL을 Form 상태에 동기화하기

여기에는 신속하게 처리할 수 있는 몇 가지 UX 문제가 있습니다.
1. 검색 후 뒤로를 클릭하면 목록이 더 이상 필터링되지 않더라도 form 필드에는 입력한 값이 계속 있습니다.
2. 검색 후 페이지를 새로 고치면 목록이 필터링 되더라도 form 필드에 더 이상 값이 없습니다.

즉, URL과 입력의 상태가 동기화되지 않습니다.

먼저 (2)를 풀고 URL의 값으로 입력을 시작합니다.

👉 **`loader`에서 `q를` 반환하고 입력의 기본값으로 설정하십시오.**

```js title:app/root.tsx
// existing imports & exports

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const navigation = useNavigation();

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        <div id="sidebar">
          {/* existing elements */}
          <div>
            <Form id="search-form" role="search">
              <input
                aria-label="Search contacts"
                defaultValue={q || ""}
                id="q"
                name="q"
                placeholder="Search"
                type="search"
              />
              {/* existing elements */}
            </Form>
            {/* existing elements */}
          </div>
          {/* existing elements */}
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}

```

입력 필드에는 지금 검색 후 페이지를 새로 고치면 쿼리가 표시됩니다.

이제 문제 (1)의 경우 뒤로 버튼을 클릭하고 입력을 업데이트합니다. React에서 `useEffect`를 가져와 DOM에서 입력 값을 직접 조작할 수 있습니다.

👉 **`입력 값을 URLSearchParams`와 동기화합니다.**

```js title:app/root.tsx
// existing imports
import { useEffect } from "react";

// existing imports & exports

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const navigation = useNavigation();

useEffect(() => {
    const searchField = document.getElementById("q");
    if (searchField instanceof HTMLInputElement) {
      searchField.value = q || "";
    }
  }, [q]);

// existing code
}
```

🤔 이를 위해 제어 된 구성 요소와 React State를 사용해야하지 않습니까?

당신은 확실히 이것을 제어 된 컴포넌트로 수행 할 수 있습니다. 더 많은 동기화 지점이 있지만 그것은 당신에게 달려 있습니다.

```js title:app/root.tsx
// existing imports
import { useEffect, useState } from "react";

// existing imports & exports

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  // the query now needs to be kept in state
  const [query, setQuery] = useState(q || "");

// we still have a `useEffect` to synchronize the query
  // to the component state on back/forward button clicks
  useEffect(() => {
    setQuery(q || "");
  }, [q]);

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        <div id="sidebar">
          {/* existing elements */}
          <div>
            <Form id="search-form" role="search">
              <input
                aria-label="Search contacts"
                id="q"
                name="q"
                // synchronize user's input to component state
                onChange={(event) =>
                  setQuery(event.currentTarget.value)
                }
                placeholder="Search"
                type="search"
                // switched to `value` from `defaultValue`
                value={query}
              />
              {/* existing elements */}
            </Form>
            {/* existing elements */}
          </div>
          {/* existing elements */}
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}
```

자, 이제 뒤로 앞으로 새로 고침 버튼을 클릭할 수 있어야 하며 입력 값이 URL 및 결과와 동기화되어야 합니다.

## `Form`의 `onChange` 제출

여기서 제품 결정을 내려야 합니다. 사용자가 `form`을 제출하여 일부 결과를 필터링하도록 하는 경우도 있고, 사용자가 입력할 때 필터링하려는 경우도 있습니다. 우리는 이미 첫 번쨰를 구현했으므로 두 번째는 어떤지 봅시다.

우리는 `useNavagate`를 이미 보았고 이를 위해 사촌 격인 `useSubmit`을 사용할 것입니다.

```js title:app/root.tsx
// existing imports
import {
  Form,
  Links,
  Meta,
  NavLink,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
  useNavigation,
  useSubmit,
} from "@remix-run/react";
// existing imports & exports

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const submit = useSubmit();

// existing code

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        <div id="sidebar">
          {/* existing elements */}
          <div>
            <Form
              id="search-form"
              onChange={(event) =>
                submit(event.currentTarget)
              }
              role="search"
            >
              {/* existing elements */}
            </Form>
            {/* existing elements */}
          </div>
          {/* existing elements */}
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}
```

입력하면 `form`이 자동으로 제출됩니다.

[`submit`](https://remix.run/docs/en/main/hooks/use-submit)할 인수를 기록해 둡니다. `submit` 함수는 사용자가 전달하는 모든 양식을 직렬화하고 제출합니다. `event.currentTarget`을 전달하고 있습니다. `currentTarget`은 이벤트가 연결된 DOM 노드(`form`)입니다.

## 검색 스피너 추가

프로덕션 앱에서 이 검색이 한 번에 모두 보내고 클라이언트 쪽을 필터링하기에는 너무 큰 데이터베이스에서 레코드를 찾을 가능성이 높습니다. 그렇기 때문에 이 데모에는 가짜 네트워크 대기 시간이 있습니다.

로딩 표시기가 없으면 검색이 다소 느려지는 느낌이 듭니다. 데이터베이스를 더 빠르게 만들 수 있더라도 항상 사용자의 네트워크 대기 시간이 방해가 되고 통제할 수 없습니다.

더 나은 사용자 환경을 위해 검색에 대한 몇 가지 즉각적인 UI 피드백을 추가해 보겠습니다. [`useNavigation`](https://remix.run/docs/en/main/hooks/use-navigation)을 다시 사용하겠습니다.

👉 **검색 중인지 알 수 있는 변수 추가**

```js title:app/root.tsx
// existing imports & exports

export default function App() {
  const { contacts, q } = useLoaderData<typeof loader>();
  const navigation = useNavigation();
  const submit = useSubmit();
  const searching =
    navigation.location &&
    new URLSearchParams(navigation.location.search).has(
      "q"
    );

// existing code
}

```

아무 일도 일어나지 않을 때 `navigation.location`은 `undefined`가 될것이고 사용자가 탐색하면 데이터가 로드 되는 동안 다음 위치로 채워집니다. 그런 다음 `location.search`로 검색되고 있는지 확인합니다.

👉 **새 검색 상태를 사용하여 양식 요소를 검색하는 클래스 추가**

```js title:app/root.tsx
// existing imports & exports

export default function App() {
  // existing code

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        <div id="sidebar">
          {/* existing elements */}
          <div>
            <Form
              id="search-form"
              onChange={(event) =>
                submit(event.currentTarget)
              }
              role="search"
            >
              <input
                aria-label="Search contacts"
                className={searching ? "loading" : ""}
                defaultValue={q || ""}
                id="q"
                name="q"
                placeholder="Search"
                type="search"
              />
              <div
                aria-hidden
                hidden={!searching}
                id="search-spinner"
              />
            </Form>
            {/* existing elements */}
          </div>
          {/* existing elements */}
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}
```

이제 검색 입력의 왼쪽에 멋진 스피너가 있어야 합니다.
![](https://remix.run/docs-images/contacts/20.webp)
## History 스택 관리

form은 모든 키 입력에 대해 제출되기 때문에 "alex" 문자를 입력한 다음 백스페이스로 삭제하면 거대한 기록 스택이 생성됩니다. 우리는 확실히 이것을 원하지 않습니다.
![](https://remix.run/docs-images/contacts/21.webp)
History 스택의 현재 항목을 푸시하는 대신 다음 페이지로 *교체*하여 이를 방지할 수 있습니다.

👉 **`submit`에서 `replace` 사용**

```js title:app/root.tsx
// existing imports & exports

export default function App() {
  // existing code

return (
    <html lang="en">
      {/* existing elements */}
      <body>
        <div id="sidebar">
          {/* existing elements */}
          <div>
            <Form
              id="search-form"
              onChange={(event) => {
                const isFirstSearch = q === null;
                submit(event.currentTarget, {
                  replace: !isFirstSearch,
                });
              }}
              role="search"
            >
              {/* existing elements */}
            </Form>
            {/* existing elements */}
          </div>
          {/* existing elements */}
        </div>
        {/* existing elements */}
      </body>
    </html>
  );
}

```

이것이 첫 번째 검색인지 여부를 빠르게 확인한 후 `replace`로 결정했습니다. 이제 첫 번째 검색에 새 항목이 추가되지만 그 이후의 모든 키 입력은 현재 항목을 대체합니다. 사용자는 검색을 제거하기 위해 뒤로 7번 클릭하는 대신 한 번만 뒤로 클릭하면 됩니다.

## 네비게이션 없는 `Form`

지금까지 모든 form이 URL을 변경했습니다. 이러한 사용자 흐름은 일반적이지만 *navitation*을 하지 않고 form을 제출하려는 것도 마찬가지로 일반적입니다.

이러한 경우 [`useFetcher`](https://remix.run/docs/en/main/hooks/use-fetcher)가 있습니다. 이를 통해 navigation을 일으키지 않고 `action` 및 `loader`와 통신 할 수 있습니다.

연락처 페이지의 ★ 버튼이 이에 적합합니다. 새 레코드를 만들거나 삭제하지 않으며 페이지를 변경하고 싶지 않습니다. 우리는 단순히 우리가 보고 있는 페이지의 데이터를 변경하려고 합니다.

👉 **`<Favorite>` 폼을 fetcher 폼으로 변경합니다.**

```js app/routes/contacts.$contactId.tsx
// existing imports
import {
  Form,
  useFetcher,
  useLoaderData,
} from "@remix-run/react";
// existing imports & exports

// existing code

const Favorite: FunctionComponent<{
  contact: Pick<ContactRecord, "favorite">;
}> = ({ contact }) => {
  const fetcher = useFetcher();
  const favorite = contact.favorite;

return (
    <fetcher.Form method="post">
      <button
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
        name="favorite"
        value={favorite ? "false" : "true"}
      >
        {favorite ? "★" : "☆"}
      </button>
    </fetcher.Form>
  );
};
```

이 form은 더 이상 navigation을 유발하지 않고 단순히 `action`을 fetch 합니다. 그러다 보니... `action`을 마들 때까지는 작동하지 않습니다.

👉 **`action` 만들기**

```js title:app/routes/contacts.$contactId.tsx
import type {
  ActionFunctionArgs,
  LoaderFunctionArgs,
} from "@remix-run/node";
// existing imports

import { getContact, updateContact } from "../data";
// existing imports

export const action = async ({
  params,
  request,
}: ActionFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const formData = await request.formData();
  return updateContact(params.contactId, {
    favorite: formData.get("favorite") === "true",
  });
};

// existing code

```

이제 사용자 이름 옆에 있는 별을 클릭할 준비가 되었습니다.
![](https://remix.run/docs-images/contacts/22.webp)
두 별이 자동으로 업데이트 되는지 확인하십시오. 우리는 새로운 `<fetcher.Form method="post">`는 우리가 사용하던 `<Form>` 와 거의 똑같이 작동합니다; action을 호출한 다음 모든 데이터가 자동으로 재검증됩니다. 심지어 당신의 오류도 같은 방식으로 잡힐 것입니다.

그러나 한 가지 주요 차이점은 navitation이 아니므로 URL이 변경되지 않고 History Stack이 영향을 받지 않는 다는 것입니다.

## Optimistic UI

마지막 섹션에서 즐겨찾기 버튼을 클릭했을 때 앱이 응답하지 않는 것처럼 느껴졌을 것입니다. 다시 한번 말씀드리지만, 현실 세계에서 사용할 수 있도록 네트워크 대기 시간을 추가했습니다.

사용자에게 피드백을 제공하기 위해 [`fetcher.state`](https://remix.run/docs/en/main/hooks/use-fetcher#fetcherstate)(이전의 `navigation.state`와 매우 유사)를 사용하여 별을 로딩 상태로 만들 수 있지만 이번에는 더 나은 작업을 수행할 수 있습니다. "Optimistic UI(낙관적 UI)" 전략을 사용할 수 있습니다.

fetcher는 `action`에 제출되는 `FormData`를 알고 있으므로 `fetcher.formdata`에서 사용할 수 있습니다. 우리는 이를 사용하여 네트워크가 완료되지 않더라도 별의 상태를 즉시 업데이트할 것입니다. 결국 업데이트가 실패하면 UI가 실제 데이터로 되돌아갑니다.

👉 **`fetcher.formData`에서 optimistic 값을 읽습니다.**

```js title:app/routes/contacts.$contactId.tsx
// existing code

const Favorite: FunctionComponent<{
  contact: Pick<ContactRecord, "favorite">;
}> = ({ contact }) => {
  const fetcher = useFetcher();
  const favorite = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : contact.favorite;

이제 별을 클릭하면 *즉시* 새 상태로 변경됩니다.

그거에요! Remix를 사용해 주셔서 감사합니다. 이 튜토리얼이 훌륭한 사용자 경험을 구축하기 위한 견고한 시작이 되기를 바랍니다. 더 많은 작업을 수행할 수 있으므로 모든 API를 확인해야 합니다.</article></body></html>

Tutorial(튜토리얼)

마산 개발자