필요할 때 update, delete 기능 보이기

이번 수업에서는 글을 선택했을 때만 update, delete 기능이 표시되도록 개선을 해보려고 합니다. 이 과정에서 server component에서 client component로 부분적으로 전환하는 방법을 익히게 될 것입니다.

소스코드

https://github.com/egoing/nextapp/commit/66de9dbd93cf1314b486c3ae06c4356940814bb6

절차

1. app/Control.js 생성

"use client"
import Link from 'next/link';
import { useParams } from 'next/navigation';

export function Control() {
  const params = useParams();
  const id = params.id;
  return (
    <ul>
      <li><Link href="/create">Create</Link></li>
      {id ? <>
        <li><Link href={"/update/"+id}>Update</Link></li>
        <li><input type="button" value="delete" /></li>
      </> : null}
    </ul>
  );
}

2. Control 컴포넌트를 app/layout.js에서 사용

import Link from 'next/link'
import './globals.css'
import { Control } from './Control';

export const metadata = {
  title: 'Web tutorial',
  description: 'Generated by egoing',
}
export default async function RootLayout({ children }) {
  const resp = await fetch('http://localhost:9999/topics', { cache: 'no-store' });
  const topics = await resp.json();
  return (
    <html>
      <body>
      <h1><Link href="/">WEB</Link></h1>
      <ol>
        {topics.map((topic)=>{
          return <li key={topic.id}><Link href={`/read/${topic.id}`}>{topic.title}</Link></li>
        })}
      </ol>
        {children}
        <Control />
      </body>
    </html>
  )
}

server component 내에서는 현재 동적 라우팅의 값([id])을 layout 안에서는 알 수 없습니다. useParams를 사용해야 하는데 useParams는 client component입니다. app/layout.js 전체를 client component로 전환해도 됩니다만, server component의 이점을 포기하기는 싫기 때문에 여기서는 client component의 기능이 필요한 부분만 별도의 컴포넌트로 분리했습니다.

필요할 때 update, delete 기능 보이기

소스코드

절차

댓글