8단계: 리뷰 남기기
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 46번째.
챌린지
중급요리에 리뷰를 작성할 수 있도록 만드세요.
'use server';로 시작하는app/actions.js를 생성하고async function addReview(formData)를 export 하세요.- 폼 데이터에서
slug및text를 읽어오고, 비어있는text는 무시한 뒤,await addReviewToDb(slug, text)를 호출하고next/cache에서revalidatePath('/menu/' + slug)를 호출하세요. - 요리 페이지에서
await getReviews(slug)를 실행하고.detailarticle 요소 아래에<section>을 추가하세요. - 해당 섹션 안에는 slug 값을 전달하는 hidden input
name="slug", 텍스트 입력인id="review-input" name="text", 그리고<button id="review-submit" type="submit">을 포함하는<form id="review-form" action={addReview}>을 배치하세요. - 폼 아래에는 각 리뷰당 하나씩
id={'review-' + index}속성을 가진<li>를 사용하는<ul id="review-list" className="reviews">를 렌더링하세요.
직접 해보기
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</body>
</html>
);
}Next.js 핵심 (Next.js Essentials)의 모든 레슨
8프로젝트: Coddy Eats
1단계: 기본 셸 구성
2단계: 메뉴 그리드3단계: 요리 페이지4단계: 로딩 상태5단계: 페이지 제목6단계: 장바구니에 담기7단계: 카테고리 필터8단계: 리뷰 남기기9단계: 실시간 검색