수정 기능 구현

수정 기능은 read + create 기능을 합친 것과 같습니다. 

소스코드

https://github.com/egoing/nextapp/commit/3938ee91148d7bd8096211866e4cc26e3f64662b

절차

1. app/update/[id]/page.js 생성

'use client'
import { useRouter } from "next/navigation";
import {useEffect, useState} from 'react';
 
export default function Update(props){
  const router = useRouter();
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const id = props.params.id;
  async function refresh(){
    const resp = await fetch(`http://localhost:9999/topics/${id}`);
    const topic = await resp.json();
    setTitle(topic.title);
    setBody(topic.body);
  }
  useEffect(()=>{
    refresh();
  }, []);
  return <form onSubmit={async evt=>{
    evt.preventDefault();
    const title = evt.target.title.value;
    const body = evt.target.body.value;
    const resp = await fetch(`http://localhost:9999/topics/${id}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({title, body})
    });
    const topic = await resp.json();
    router.push(`/read/${topic.id}`);
    router.refresh();
  }}>
    <h2>Update</h2>
    <p><input type="text" name="title" placeholder="title" onChange={e=>setTitle(e.target.value)} value={title}/></p>
    <p><textarea name="body" palceholder="body" onChange={e=>setBody(e.target.value)} value={body}></textarea></p>
    <p><input type="submit" value="update" /></p>
  </form>
}

2. read 페이지 캐슁 끄기

수정을 한 후에 /read/[id]로 접속을 하면 내용이 갱신되지 않습니다. 여기서는 캐쉬 기능을 끄겠습니다. 

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