From a2a408c922b51b1ef0579d20fa1bf4ec32904e8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=92=E1=85=A7=E1=86=AB=E1=84=8B?= =?UTF-8?q?=E1=85=A1?= Date: Sun, 10 Mar 2019 12:28:57 +0900 Subject: [PATCH 1/6] feat(uncontrolled-components): translate --- content/docs/uncontrolled-components.md | 31 ++++++++++++------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md index 2b1c97405..ea2f69758 100644 --- a/content/docs/uncontrolled-components.md +++ b/content/docs/uncontrolled-components.md @@ -1,14 +1,14 @@ --- id: uncontrolled-components -title: Uncontrolled Components +title: 비제어 컴포넌트 permalink: docs/uncontrolled-components.html --- -In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. +대부분 경우에 폼을 구현하는데 [제어 컴포넌트](/docs/forms.html)를 사용하는 것이 좋습니다. 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에 의해 다루어집니다. 대안인 비제어 컴포넌트는 DOM 자체에 의해 폼 데이터가 다루어집니다. -To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM. +모든 state를 업데이트하기 위해 이벤트 처리를 하는 대신 비제어 컴포넌트를 쓰기위해서는 [레퍼런스를 사용](/docs/refs-and-the-dom.html)하여 DOM으로부터 값을 가져올 수 있습니다. -For example, this code accepts a single name in an uncontrolled component: +예를 들어 아래 코드는 비제어 컴포넌트에 단일 이름을 허용합니다. ```javascript{5,9,18} class NameForm extends React.Component { @@ -37,15 +37,15 @@ class NameForm extends React.Component { } ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/WooRWa?editors=0010) -Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components. +비제어 컴포넌트는 DOM에 신뢰 가능한 출처를 유지하기 때문에 비제어 컴포넌트를 사용할 때 React와 non-React 코드를 통합하는 것이 쉬울 수 있습니다. 빠르고 더러운걸 원한다면 코드가 약간 적을 수도 있습니다. 그렇지 않으면 일반적으로 제어된 컴포넌트를 사용해야 합니다. -If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful. +특정 상황에서 사용해야 하는 컴포넌트의 타입이 명확하지 않은 경우, [제어된 입력과 비제어 입력에 대한 기사](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)가 도움이 될 것입니다. -### Default Values {#default-values} +### 기본 값 {#default-values} -In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`. +React 렌더링 생명주기에서 폼 엘리먼트의 `value` 어트리뷰트는 DOM의 value를 대체합니다. 비제어 컴포넌트를 사용하면 React 초기 값을 지정하지만 그 이후의 업데이트는 제어하지 않는 것이 좋습니다. 이러한 경우에 `value` 어트리뷰트 대신 `defaultValue`를 지정할 수 있습니다. ```javascript{7} render() { @@ -64,21 +64,20 @@ render() { } ``` -Likewise, `` and `` support `defaultChecked`, and `