리믹스는 더 깊은 모습을 형성합니다

양식 작업을 기반으로 creating new posts with Remix을 살펴보았습니다.

우리는 리믹스 양식(주목할 만한 차이점은 대문자 F)을 설정하고 액션 함수를 사용하여 이 데이터에 연결했습니다.

export const action = async ({ request }) => {
  // Do a action
};

export default function NewPost() {
  return <Form method='post'>...</Form>;
}

위의 예는 기본 설정입니다. 그러나 이것으로 훨씬 더 많은 일을 할 수 있습니다!

방법 변경

위의 예에서는 post 메소드를 사용했지만 메소드를 변경하여 이를 GET 요청으로 변경할 수 있습니다.

// post
<Form method='post'>

// get
<Form method='get'>

게시물은 동일한 URL에 대한 실제 게시물 요청을 만들고 여기서 get은 쿼리 문자열을 URL로 푸시합니다.

주요 차이점은 이 두 가지를 처리하고 데이터를 검색하는 방법입니다.

// handle post
export const action = async ({ request }) => {
  // Do a action
};

// handle get
export const loader = async ({ request }) => {
  // Do a action
};

이들 간의 주요 차이점은 작업 이름이 action 또는 loader 입니다.

가져오기 데이터 검색

GET 데이터를 활용하는 방법을 간단히 살펴보겠습니다.

여러분 중 일부는 제가 GET 방식과 POST 방식을 사용하는지 궁금할 것입니다.
그리고 매우 일반적인 답변을 제공합니다.

GET : 변경하지 않고 보기

POST : 무언가 변경/민감한 데이터

GET 예제에 대한 검색 양식을 사용합시다. 특정 쿼리에 대한 검색 결과를 보고 싶습니다.

우리의 양식은 다음과 같을 수 있습니다.

export default function Search() {
  return (
    <main>
      <h1>Search page</h1>
      <Form method='get'>
        <input type='text' name='query' placeholder='Search for something' />
      </Form>
    </main>
  );
}

이 쿼리를 검색하기 위해 loader 함수를 사용할 수 있습니다.

export let loader: LoaderFunction = ({ request }) => {
  const url = new URL(request.url);
  const search = new URLSearchParams(url.search);
  return json({ search: search.get('query') });
};

이상적인 세상에서는 일부 함수를 호출하고 검색 결과의 JSON을 반환합니다.

그런 다음 useLoaderData 함수를 사용하여 이 데이터에 연결할 수 있습니다.

export default function Search() {
  const data = useLoaderData();
  // Do something with data in the HTML
  ...
}

그러나 페이지를 새로 고칠 때 쿼리는 URL에 남아 있지만 양식 필드는 비어 있습니다.

이 문제를 해결하기 위해 다른 환상적인 기능을 연결할 수 있습니다.

export default function Search() {
    ...
  const [params] = useSearchParams()

  return (
    <main>
      <Form method='get'>
        <input ... defaultValue={params.get("query")} />
      </Form>
    </main>
  );
}

이러한 검색 매개변수를 사용하여 양식의 기본값을 설정할 수 있습니다.

게시물 데이터 검색

우리는 이것이 어떻게 작동하는지 주로 보았지만 간단히 요약해 보겠습니다.

게시물의 경우 로그인 양식을 지정하겠습니다.

export default function Login() {
  return (
    <Form method='post' className='flex flex-col'>
      <label>
        Username: <input type='text' name='username' />
      </label>
      <label>
        Password: <input type='password' name='password' />
      </label>
      <button type='submit'>Login</button>
    </Form>
  );
}

이 데이터를 검색하려면 작업 함수에 연결해야 합니다.

export const action = async ({ request }) => {
  const formData = await request.formData();

  // Do something with the data

  // Redirect or simply return JSON
  return json({ success: true });
};

작업에 대한 일반적인 응답은 다른 페이지로 리디렉션하거나 현재 상황에 대한 메시지를 사용자에게 표시하는 것입니다.

내일 우리는 post 메서드에 대한 양식 오류 처리에 대해 자세히 살펴보겠습니다.

GitHub에서 오늘의 예제 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나