'use client' 코드 줄

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

'use client'는 누군가 삭제하는 것을 잊은 듯한 지연된 문자열처럼 보입니다. 하지만 실제로는 그렇지 않습니다. 이것은 지시어(directive)이며, 두 가지 규칙을 반드시 기억해야 합니다. 두 규칙 모두 개발자들이 자주 겪는 함정이기 때문입니다.

규칙 1: 첫 번째 줄이어야 합니다

import 구문보다도 전. 중요한 주석들보다도 전. 파일의 가장 첫 번째 줄에 작성합니다:

'use client';

import { useState } from 'react';

이것을 import 아래로 밀어 넣으면 지시어로서의 기능을 잃고 아무 의미 없는 문자열 표현식이 되며, 파일은 서버 컴포넌트로 남아 마치 지시어를 작성하지 않은 것처럼 훅 에러가 발생합니다. 이 문제는 파일에 해당 줄이 똑똑히 적혀 있고 올바르게 보이기 때문에 실제로 많은 사람들의 시간을 허비하게 만듭니다.

규칙 2: 파일 전체에 적용됩니다

하나의 컴포넌트만 지정하는 방법은 없습니다. 파일에 지시어가 있는 경우, 해당 파일에 정의된 모든 것이 client 코드입니다:

'use client';

function Row() { … }        // 클라이언트
export default function Table() { … }   // 클라이언트도

그리고 이는 하위로 전파됩니다. `client` 컴포넌트가 `import`하고 렌더링하는 모든 것은 마찬가지로 `client` 코드가 됩니다. 큰 파일의 맨 위에 선언한 하나의 지시문이 의도치 않게 수많은 JavaScript를 브라우저로 전송할 수 있으며, 이것이 바로 다음 레슨에서 해결할 문제입니다.

챌린지

쉬움

components/Counter.jsx 파일의 잘못된 위치에 'use client' 라인이 작성되어 있습니다. 이로 인해 앱에서 훅(hook) 에러가 발생합니다.

'use client'; 구문을 components/Counter.jsx의 import 문 위인 첫 번째 줄로 이동하세요.

해당 파일에 있는 두 컴포넌트인 Counter와 이 컴포넌트가 렌더링하는 ResetButton 모두 그 한 줄 덕분에 client 컴포넌트가 됩니다. 두 번째 지시문은 필요하지 않으며 추가해서도 안 됩니다.

직접 해보기

import './globals.css';

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

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