요약: 서버와 클라이언트
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 22번째.
챌린지
중급챕터 요약: 서버/클라이언트 경계를 직접 설정하세요.
페이지가 서버에서 요리 목록을 나열하지만, 버튼에 직접 onClick을 설정했기 때문에 앱이 전혀 렌더링되지 않습니다. 페이지를 클라이언트 컴포넌트로 마킹하지 **않고** 문제를 해결하세요:
components/OpenHours.jsx에open불리언 상태를 유지하고id="toggle"속성을 가진 버튼을 렌더링하는 클라이언트 컴포넌트(1번째 줄에'use client')를 작성하세요. 버튼 텍스트는 닫혀 있을 때Show hours이고 열려 있을 때Hide hours이어야 합니다.- 열려 있을 때
id="hours"속성과Open 9am-5pm텍스트를 가진<p>태그도 함께 렌더링합니다. 닫혀 있을 때는 해당 문단이 존재하지 않아야 합니다. app/page.jsx에서 고장난 버튼과 항상 표시되는 문단을'../components/OpenHours'에서 가져온<OpenHours />로 교체하세요. 제목과 요리 목록은 그대로 유지됩니다. 즉, 페이지는 서버 컴포넌트로 유지되어야 합니다.
직접 해보기
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}