[Next.js] 읽기 기능 구현

Html이나 css버튼을 클릭하였을 때 나오는 읽기 기능을 구현해보겠습니다.

app/read/[id]/page.js를 수정해보겠습니다.

export default async function Read(props) {
  const resp = await fetch(`http://localhost:9999/topics/${props.params.id}`);
  //id값을 Url에 반영하여 데이터를 가져온다.
  const topic = await resp.json();
  return (
    <>
      <h2>{topic.title}</h2>
      {topic.body}
    </>
  );
}

• 이 페이지는 사용자와 상호작용하지 않습니다. 이런 컴포넌트는 서버컴포넌트로 가면 됩니다.
• 데이터를 서버로 가져오기 위해 async를 사용합니다.
• fetch를 통해 id값을 url에 반영하여 데이터를 가져왔습니다.
• 그에 대한 결과를 topic에 저장합니다.
• 페이지에 topic의 Title을 넣고 body또한 넣으며 페이지에 출력하도록 합니다.