Next.js 13 - 15. 글수정

글 수정

수정 기능을 구현해보자. 아직 페이지가 없어 404가 뜰 것이다. 우선 /src/app/update/[id]/page.tsx 파일을 만들어 주고 기본 틀만 제공하자.

 

그런데 수정이란 크게 2가지의 합성이다.

Update = Create + Read 

따라서 수정을 진행할 때 읽고 만드는 두 가지가 모두 필요하다.

 

기본적인 UI는 Create에 있는 page.tsx에서 가져오자. 그런데 Update는 원본이 적혀 있어야 하기 때문에 Read 기능도 필요하다.

 

그런데 Create는 클라이언트 컴포넌트이고 Read는 서버 컴포넌트로 구현되어 있다. 그래서 이걸 그대로 사용할 수는 없다.

useEffect와 fetch를 이용해서 데이터를 가져오는 작업이 필요하다. 그리고 가져온 데이터를 form 안에 넣기 위해서는 state를 만들어 줄 필요가 있다. 그래서 각 항목에 대해 state를 선언해주고 데이터를 가져온 후 setState를 처리해주자. 그리고 value 값을 각각 맞는 위치에 넣어주자. 

 

이렇게 하면 원본 값이 입력이 되지만 값이 변경되지는 않는다. 왜냐하면 value 값이 변경되지 않으면 form 값이 변경되지 않는다는 React의 철학이 있기 때문이다. 따라서 onChange 함수를 넣어주자! 그럼 form 내 값이 잘 바뀐다.

 

그리고 기존에 POST였던 부분을 PUT이나 PATCH로 바꾸고 url을 id를 추가해 수정해주자. 잘 되는지 테스트 해보면 글 목록은 잘 갱신됐다. 그런데 본문은 아직도 변경 전이다. 저 부분은 cache가 사용되었기 때문인데, 일단 상세 조회의 fetch 부분 캐시를 끄고 처리해보자.

 

// /src/app/read/[id]/page.tsx

export default async function Read(props: any) {
  const resp = await fetch(`http://localhost:9999/topics/${props.params.id}`, {
    cache: 'no-store',
  });
  const topic = await resp.json();
  return (
    <>
      <h2>{topic.title}</h2>
      {topic.body}
    </>
  );
}

// /src/app/update/[id]/page.tsx

'use client';

import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function Update() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const router = useRouter();
  const params = useParams();
  const id = params.id;
  useEffect(() => {
    fetch(`http://localhost:9999/topics/` + id)
      .then((res) => res.json())
      .then((result) => {
        setTitle(result.title);
        setBody(result.body);
      });
  }, []);
  return (
    <form
      onSubmit={(e: any) => {
        e.preventDefault();
        const title = e.target.title.value;
        const body = e.target.body.value;
        const options = {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ title, body }),
        };
        fetch(`http://localhost:9999/topics/${id}`, 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'
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </p>
      <p>
        <textarea
          name='body'
          placeholder='body'
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
      </p>
      <p>
        <input type='submit' value={'Update'} />
      </p>
    </form>
  );
}

 

 

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

Data Fetching: Fetching, Caching, and Revalidating | Next.js