Translate: use-client

src/content/reference/react/use-client.md

@@ -4,26 +4,25 @@ canary: true
 ---
 
 <Canary>
-
-`'use client'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
+`'use client'` 는 [React 서버 컴포넌트를 사용](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)하거나 그와 호환되는 라이브러리를 만들 때에만 사용합니다.
 </Canary>
 
 
 <Intro>
 
-`'use client'` marks source files whose components execute on the client.
+`'use client'`는 컴포넌트가 클라이언트에서 실행되는 소스 파일을 표시합니다.
 
 </Intro>
 
 <InlineToc />
 
 ---
 
-## Reference {/*reference*/}
+## 레퍼런스 {/*reference*/}
 
 ### `'use client'` {/*use-client*/}
 
-Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported.
+파일의 맨 위에 `'use client';`를 추가하여 가져온 위치와 관계없이 파일(사용하는 모든 하위 컴포넌트를 포함)이 클라이언트에서 실행됨을 표시합니다. 
 
 ```js
 'use client';
@@ -34,26 +33,27 @@ export default function RichTextEditor(props) {
   // ...
 ```
 
-When a file marked `'use client'` is imported from a server component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the import as the "cut-off point" between server-only code and client code. Components at or below this point in the module graph can use client-only React features like [`useState`](/reference/react/useState).
+서버 컴포넌트에서 `'use client'`라고 표시된 파일을 가져오면 [호환되는 번들러](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)는 import를 서버 전용 코드와 클라이언트 코드 사이의 분리점으로 처리합니다. 모듈 그래프의 이 지점 이하의 컴포넌트는 [`useState`](/reference/react/useState)와 같은 클라이언트 전용 React 기능을 사용할 수 있습니다.
+
+#### 주의사항 {/*caveats*/}
 
-#### Caveats {/*caveats*/}
+* 클라이언트 전용 React 기능을 사용하는 모든 파일에 `'use client'`를 추가할 필요는 없으며 서버 컴포넌트 파일에서 가져온 파일에만 추가하면 됩니다. `'use client'`는 서버 전용 코드와 클라이언트 코드의 _경계_ 를 나타내며 트리 아래에 있는 컴포넌트는 클라이언트에서 자동으로 실행됩니다. 서버 컴포넌트에서 렌더링하려면 `'use client'` 파일에서 내보내는 컴포넌트가 직렬화할 수 있는 props를 가져야 합니다.
+* 서버 파일에서 `'use client'` 파일을 가져오면 React 컴포넌트로 렌더링하거나 props를 통해 클라이언트 컴포넌트로 전달할 수 있습니다. 그 외의 용도로는 예외가 발생합니다.
+* 다른 클라이언트 파일에서 `'use client'` 파일을 가져오면 지시문(`use client`)는 아무런 효과가 없습니다. 이를 통해 서버와 클라이언트 컴포넌트에서 동시에 사용할 수 있는 클라이언트 전용 컴포넌트를 작성할 수 있습니다.
+* `'use client'` 파일의 모든 코드와 그것이 가져온 (직접적으로 또는 간접적으로) 모듈은 클라이언트 모듈 그래프의 일부가 될 것이고 브라우저에서 렌더링 되기 위해 클라이언트로 보내지고 실행되어야 합니다. 클라이언트 bundle 크기를 줄이고 서버의 이점을 최대한 활용하기 위해 가능하면 트리에서 `'use client'` 지시문과 state를 낮게 이동시키고 렌더링 된 서버 컴포넌트들을 [자식으로](/learn/passing-props-to-a-component#passing-jsx-as-children) 클라이언트 컴포넌트에 전달합니다.
+* props는 서버-클라이언트 경계를 넘어 직렬화되기 때문에 이러한 지시문의 배치는 클라이언트로 전송되는 데이터의 양에 영향을 미칠 수 있음에 유의하고 필요 이상으로 큰 데이터 구조를 피해야 합니다.
+* `<MarkdownRenderer>`와 같이 서버 전용 기능과 클라이언트 전용 기능을 모두 사용하지 않는 컴포넌트는 일반적으로 `'use client'`로 표시해서는 안 됩니다. 이렇게 하면 서버 컴포넌트에서 사용할 때는 서버 전용으로 렌더링할 수 있지만 클라이언트 컴포넌트에서 사용할 때는 클라이언트 bundle에 추가됩니다.
+* npm에 게시된 라이브러리는 직렬화할 수 있는 props를 사용하여 클라이언트 전용 React 기능으로 렌더링할 수 있는 React 컴포넌트에 `'use client'`를 포함해야 합니다. 이를 통해 해당 컴포넌트가 서버 컴포넌트에 의해 import 되어 렌더링 될 수 있습니다. 그렇지 않으면 사용자는 라이브러리 컴포넌트를 자신의 `'use client'` 파일로 감쌀 필요가 있어 번거로울 수 있고 나중에 라이브러리가 서버로 로직을 이동하는 것을 방지할 수 있습니다. 사전 번들 된 파일을 npm에 게시할 때는 서버에서 직접 사용할 수 있는 export가 포함된 bundle과는 별도로 `'use client'`라고 표시된 bundle이 포함되도록 해야 합니다.
+* 클라이언트 컴포넌트는 서버 측 렌더링(SSR) 또는 빌드 타임 정적 사이트 생성(SSG)의 일부로 실행될 것입니다. 이는 React 컴포넌트의 초기 렌더링 출력을 HTML로 변환하여 JavaScript bundle이 다운로드 되기 전에 렌더링할 수 있습니다. 하지만 데이터베이스에서 직접 읽는 것과 같은 서버 전용 기능은 사용할 수 없습니다.
+* `'use client'`와 같은 지시문은 파일의 맨 처음에 있어야 하며 import 코드나 다른 코드보다 우선해야 합니다. 이는 백틱이 아닌 작은따옴표나 큰따옴표로 작성되어야 합니다. (`'use xyz'` 지시문 형식은 `useXyz()`Hook 네이밍 컨벤션과 다소 유사하지만 우연한 일치입니다.)
 
-* It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props.
-* When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception.
-* When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components.
-* All the code in `'use client'` file as well as any modules it imports (directly or indirectly) will become a part of the client module graph and must be sent to and executed by the client in order to be rendered by the browser. To reduce client bundle size and take full advantage of the server, move state (and the `'use client'` directives) lower in the tree when possible, and pass rendered server components [as children](/learn/passing-props-to-a-component#passing-jsx-as-children) to client components.
-* Because props are serialized across the server–client boundary, note that the placement of these directives can affect the amount of data sent to the client; avoid data structures that are larger than necessary.
-* Components like a `<MarkdownRenderer>` that use neither server-only nor client-only features should generally not be marked with `'use client'`. That way, they can render exclusively on the server when used from a server component, but they'll be added to the client bundle when used from a client component.
-* Libraries published to npm should include `'use client'` on exported React components that can be rendered with serializable props that use client-only React features, to allow those components to be imported and rendered by server components. Otherwise, users will need to wrap library components in their own `'use client'` files which can be cumbersome and prevents the library from moving logic to the server later. When publishing prebundled files to npm, ensure that `'use client'` source files end up in a bundle marked with `'use client'`, separate from any bundle containing exports that can be used directly on the server.
-* Client components will still run as part of server-side rendering (SSR) or build-time static site generation (SSG), which act as clients to transform React components' initial render output to HTML that can be rendered before JavaScript bundles are downloaded. But they can't use server-only features like reading directly from a database.
-* Directives like `'use client'` must be at the very beginning of a file, above any imports or other code (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
 
 ## Usage {/*usage*/}
 
 <Wip>
-This section is a work in progress. 
+이 섹션은 작업 중입니다.
+이 API는 React 서버 컴포넌트를 지원하는 모든 프레임워크에서 사용할 수 있습니다. 이에 대한 추가 문서는 다음에서 찾을 수 있습니다.
 
-This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
-* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
-* More coming soon
+* [Next.js 문서](https://nextjs.org/docs/getting-started/react-essentials)
+* 추가 예정
 </Wip>