Nextjs

필요할 때 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의 기능이 필요한 부분만 별도의 컴포넌트로 분리했습니다. 

댓글

댓글 본문
  1. url에 따라 적절한 버튼 보이기. server component와 client component 분리
  2. mediumryan
    선생님, 캐싱에 관련된 영상이 누락되어 있네요.
    유튜브에는 영상이 남아있는 듯한데, 캐싱 영상만 따로 손보시려고 빼놓으신건가요?
    아무튼 너무 잘 보고 있습니다. 감사합니다 ^_^
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기