[Next.js] 생성 기능 구현 - Client Component

생성 기능을 구현하기 위해서는 onSubmit과 같은 사용자와 상호작용하는 코드가 필요합니다. 이런 코드는 서버 쪽에서 실행할 수 없기 때문에 클라이언트 쪽으로 전송되어서 실행되야 합니다. 여기서는 클라이언트 컴포넌트를 만드는 방법을 살펴봅니다.

create/page.js를 수정해보겠습니다.

1. title,body,submit버튼을 만들어줍니다.

<p>
        <input type="text" name="title" placeholder="title" />
      </p>
      <p>
        <textarea name="body" placeholder="body"></textarea>
      </p>
      <p>
        <input type="submit" value="create" />
      </p>

1. submit버튼을 눌렀을 때의 이벤트를 설정합니다.

onSubmit={(e) => {
        e.preventDefault(); 
        const title = e.target.title.value; 
        const body = e.target.body.value;

• e.preventDefault() : onSubmit실행 됐을 때의 기본적인 동작을 방지합니다. ( 주소가 안바뀜)
• const title = e.target.title.value : name이 title인 값을 title에 저장합니다.

1. 서버에 전송할 옵션을 설정합니다.

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.refresh();
            router.push(`/read/${lastid}`);
          });
      }}

• 서버쪽으로 전송해서 데이터를 추가해야하기 때문에 options값이 필요합니다.
• 서버에 전송할 옵션을 설정합니다.
• 서버에 POST 요청을 보냅니다.
• const lastid = result.id; : 서버로부터 받은 결과에서 마지막 생성된 아이디를 가져옵니다.
• router.refresh(); : 현재 페이지를 다시 로드하고 새로고침하는 역할을 합니다.
  즉, 현재 페이지의 컴포넌트를 다시 렌더링 하고, 서버에서 새로운 데이터를 가져와 화면에 반영하는데 사용됩니다.
  클라이언트 측에서 주로 사용되며, 페이지의 상태나 데이터가 변경되었을 때 사용자에게 최신 정보를 보여주는 용도로 활용됩니다.
  
• router.push(`/read/${lastid}`); : 라우터를 사용하여 새로 생성된 아이템을 읽기 페이지로 이동합니다.
  주어진 URL로 페이지를 이동시키며 페이지를 변경하면 해당 페이지에 대한 컴포넌트가 렌더링 되고 , URL 이 업데이트 됩니다.
  

전체 코드입니다.

"use client";

import { useRouter } from "next/navigation";

export default function Create() {
  const router = useRouter(); 
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault(); 
        const title = e.target.title.value;
        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.refresh();
            router.push(`/read/${lastid}`);
          });
      }}
    >
      <p>
        <input type="text" name="title" placeholder="title" />
      </p>
      <p>
        <textarea name="body" placeholder="body"></textarea>
      </p>
      <p>
        <input type="submit" value="create" />
      </p>
    </form>
  );
}

• const router = useRouter(); : useRouter를 사용하면 라우터 객체를 생성할 수 있습니다. useRouter는 client component에서만 사용 가능합니다.