이번 수업에서는 글을 선택했을 때만 update, delete 기능이 표시되도록 개선을 해보려고 합니다. 이 과정에서 server component에서 client component로 부분적으로 전환하는 방법을 익히게 될 것입니다.
소스코드
https://github.com/egoing/nextapp/commit/66de9dbd93cf1314b486c3ae06c4356940814bb6
절차
1. app/Control.js 생성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | "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에서 사용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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 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의 기능이 필요한 부분만 별도의 컴포넌트로 분리했습니다.
