검색 및 페이지 매김 추가

📌 URL 검색 매개변수를 사용하는 이유는 무엇인가요?

위에서 언급했듯이 URL 검색 매개변수를 사용하여 검색 상태를 관리하게 됩니다. 클라이언트 측 상태를 사용하는 데 익숙하다면 이 패턴이 생소할 수 있습니다.

📌 URL 매개변수로 검색을 구현했을 때 장점

1. 북마크 및 공유 가능한 URL : 검색 매개변수가 URL에 있으므로 사용자는 검색 쿼리 및 필터를 포함한 애플리케이션의 현재 상태를 북마크에 추가하여 나중에 참조하거나 공유할 수 있습니다.
2. 서버 측 렌더링 및 초기 로드 : URL 매개변수를 서버에서 직접 사용하여 초기 상태를 렌더링할 수 있으므로 서버 렌더링을 더 쉽게 처리할 수 있습니다.
3. 분석 및 추적 : 검색 쿼리와 필터를 URL에 직접 넣으면 추가적인 클라이언트 측 로직 없이도 사용자 행동을 더 쉽게 추적할 수 있습니다.

📌 검색 기능 추가하기

• useSearchParams - 현재 URL의 매개변수에 액세스할 수 있습니다. 예를 들어, 이 URL /dashboard/invoices?page=1&query=pending에 대한 검색 매개 변수는 다음과 같습니다: {page: '1', query: 'pending'}.
• usePathname - 현재 URL의 경로명을 읽을 수 있습니다. 예를 들어 /dashboard/invoices 경로의 경우, usePathname은 '/dashboard/invoices'를 반환합니다.
• useRouter - 클라이언트 컴포넌트 내에서 프로그래밍 방식으로 경로를 탐색할 수 있습니다. 여러 가지 방법을 사용할 수 있습니다.

'use client'; // 이 컴포넌트는 클라이언트 컴포넌트 내에서 프로그래밍 방식으로 경로를 탐색할 수 있습니다. 여러 가지 방법을 사용할 수 있습니다.

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

export default function Search({ placeholder }: { placeholder: string }) {
  function handleSearch(term: string) {
    console.log(term);
  }

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

---

서버 컴포넌트 vs 클라이언트 컴포넌트

클라이언트 컴포넌트의 단점

서버 클라이언트로 변환 후

---

글 작성

"use client";

//^ import { useRouter } from "next/router"; => next 12버전에서 사용하는 page 라우터 방식에서 사용하는 useRouter";
import { useRouter } from "next/navigation"; //^ => app 라우터에서는 navigation에서 가지고 와야 됨!!!!!

export default function Create() {
  const router = useRouter();
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const title = e.target.title.value; // target == form 태그  e.target.title(name) name이 "title"인 엘리먼트
        const body = e.target.body.value;
        const options = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ title, body }),
        };
        fetch(`http://localhost:9999/topics`, options)
          .then((res) => res.json())
          .then((result) => {
            console.log(result);
            const lastId = result.id;
            router.push(`/read/${lastId}`); // 라우터를 이용해서 방금 생성한 글로 리디렉션
          });
      }}
    >
      <p>
        <input type="text" name="title" id="" placeholder="title" />
      </p>
      <p>
        <textarea name="body" placeholder="body"></textarea>
      </p>
      <input type="submit" value="create" />
    </form>
  );
}