에러 읽기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 18번째.

서버/클라이언트 경계를 완전히 이해하기 훨씬 전에 에러 메시지를 통해 먼저 접하게 될 것입니다. 하지만 괜찮습니다. 프레임워크 에러는 벌이 아니라 규칙을 가장 빠르게 배우는 방법입니다.

가장 먼저 마주치게 될 에러는 다음과 같습니다. 페이지에서 useState를 사용하면 앱이 렌더링되지 않고 런타임에서 다음 메시지를 표시합니다:

You're importing a component that needs a
React hook (in <Home>). Hooks only work in Client
Components. To fix this, add "use client" to the top
of the file.

동료의 메모를 읽듯이 세 부분으로 나누어 읽어보세요:

고장 난 부분: component가 React hook을 필요로 함 (needs)
위치: 어떤 component를 열어야 할지 알려주는 <Home>
규칙 및 fix: hook은 client component에서만 work함 (only); "use client"를 add하세요

좋은 프레임워크 에러 메시지는 위반한 규칙의 이름을 명확히 알려줍니다. 대충 넘겨짚으면 20분 동안 헤매게 되지만, 제대로 읽으면 20초 만에 해결됩니다. 이는 새로운 프레임워크를 즐기는 사람과 프레임워크와 씨름하는 사람을 가르는 요소이기 때문에 의도적으로 연습할 만한 가치가 있는 기술입니다.

이제 직접 하나를 해결해 볼 시간입니다.

챌린지

초급

이 카운터 페이지가 고장났습니다. 실행하고 런타임에 표시되는 메시지를 읽어보세요.

페이지에서 useState를 호출하지만, 이 페이지는 서버 컴포넌트이며 훅(hooks)은 클라이언트 컴포넌트에서만 작동합니다.

에러 메시지가 요청하는 대로 정확히 수행하세요: app/page.jsx를 클라이언트 컴포넌트로 지정하세요.
다른 것은 변경하지 마세요: 카운터 로직은 이미 올바릅니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}