From bf6d9811e72b5a5d96f2c78d9e35da4543e3d24e Mon Sep 17 00:00:00 2001 From: Shim Won Date: Sun, 1 Mar 2015 23:12:15 +0900 Subject: [PATCH] Translate 10.2 to Korean - Up to b7a548c --- .../10.2-form-input-binding-sugar.ko-KR.md | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 docs/docs/10.2-form-input-binding-sugar.ko-KR.md diff --git a/docs/docs/10.2-form-input-binding-sugar.ko-KR.md b/docs/docs/10.2-form-input-binding-sugar.ko-KR.md new file mode 100644 index 0000000000..b36689db8c --- /dev/null +++ b/docs/docs/10.2-form-input-binding-sugar.ko-KR.md @@ -0,0 +1,114 @@ +--- +id: two-way-binding-helpers-ko-KR +title: 양방향 바인딩 핼퍼 +permalink: two-way-binding-helpers-ko-KR.html +prev: animation-ko-KR.html +next: class-name-manipulation-ko-KR.html +--- + +`ReactLink`는 React에서 양방향 바인딩을 표현하는 쉬운 방법입니다. + +> 주의: +> +> 프레임워크를 새로 접하신다면, 대부분의 애플리케이션에서 `ReactLink`는 필요없고 신중히 사용하셔야 함을 알려드립니다. + +React에서 데이터 흐름은 소유주에서 자식으로의 단방향입니다. 이는 [폰 노이만 컴퓨팅 모델](http://ko.wikipedia.org/wiki/%ED%8F%B0_%EB%85%B8%EC%9D%B4%EB%A7%8C_%EA%B5%AC%EC%A1%B0)의 데이터가 단방향으로 흐르기 때문입니다. 이것을 "단방향 데이터 바인딩"으로 생각하셔도 됩니다. + +하지만 많은 애플리케이션에서 데이터를 요청해서 프로그램으로 돌려줍니다. 예를 들어, 폼을 개발한다면, 사용자 입력을 받았을 때 `state`를 바꾸거나, JavaScript안에서 레이아웃을 바꾸고 그에 따라 어떤 DOM 엘리먼트의 크기를 바꾸게 하고 싶을 수도 있습니다. + +React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DOM)에서 읽어 컴포넌트에서 `setState()`를 호출하는 식으로 할 수 있습니다. "데이터 흐름 반복을 제한"하면 더 이해하기 편하고, 쉽게 유지보수할 수 있는 프로그램이 만들어지는 것은 명확합니다. 더 자세한 내용은 [폼 문서](/react/docs/forms-ko-KR.html)를 확인하세요. + +양방향 바인딩(묵시적으로 DOM의 어떤 값은 React `state`와 일치하도록 강제하는 것)은 간결하기도 하고 다양한 애플리케이션을 지원 할 수 있습니다. React는 `ReactLink`를 제공합니다. 이는 위에서 설명한 일반적인 데이터 흐름 반복 패턴을 설정하거나, 어떤 데이터 소스를 React `state`로 "링크하는" 편의 문법입니다. + +> 주의: +> +> ReactLink는 얇은 레퍼고 `onChange`/`setState()`패턴 부분의 관례일 뿐입니다. React 애플리케이션에서의 데이터 흐름을 근본적으로 바꾸지는 않습니다. + +## ReactLink: 적용 전후 + +`ReactLink`를 사용하지 않는 간단한 폼 예제입니다. + +```javascript +var NoLink = React.createClass({ + getInitialState: function() { + return {message: 'Hello!'}; + }, + handleChange: function(event) { + this.setState({message: event.target.value}); + }, + render: function() { + var message = this.state.message; + return ; + } +}); +``` + +이것은 정말 잘 동작하고, 데이터가 어떻게 흐르는지 매우 명확하게 보여지지만, 폼필드가 많을 경우 약간 장황해 질 수 있습니다. 타이핑을 줄이기 위해 `ReactLink`를 사용해 보겠습니다. + +```javascript{2,7} +var WithLink = React.createClass({ + mixins: [React.addons.LinkedStateMixin], + getInitialState: function() { + return {message: 'Hello!'}; + }, + render: function() { + return ; + } +}); +``` + +`LinkedStateMixin`는 React 컴포넌트에 `linkState()`라는 메서드를 추가합니다. `linkState()`는 React state의 현재 값과 그것을 변경할 때의 콜백을 가지는 `ReactLink` 객체를 리턴합니다. + +`ReactLink` 객체는 props로 트리의 위나 아래로 넘길 수 있어서, 쉽고 명확하게 계층구조에서 깊이 있는 컴포넌트와 높이 있는 state 사이의 양방향 바인딩을 설정할 수 있습니다. + +checkbox의 `value` 어트리뷰트는 다른 것과 다르게 checkbox가 체크되었을 때 폼 submit에 값이 전달되는 것에 주의하세요.(기본값 `on`) 그래서 `value` 어트리뷰트는 checkbox가 체크되거나 해제될 때 업데이트되지 않습니다. checkbox에서는 `valueLink`대신 `checkedLink`를 사용하셔야 합니다. +``` + +``` + + +## 내부 구조 + +`ReactLink`에는 크게 인스턴스를 생성하는 면과 사용하는 면이 있습니다. `ReactLink`가 얼마나 간단한지 확인하기위해, 이 부분들을 보다 명시적으로 고쳐 봅시다. + +### LinkedStateMixin 없이 ReactLink 쓰기 + +```javascript{5-7,9-12} +var WithoutMixin = React.createClass({ + getInitialState: function() { + return {message: 'Hello!'}; + }, + handleChange: function(newValue) { + this.setState({message: newValue}); + }, + render: function() { + var valueLink = { + value: this.state.message, + requestChange: this.handleChange + }; + return ; + } +}); +``` + +보시다시피, `ReactLink` 객체는 `value`와 `requestChange` prop만 가지는 매우 간단한 객체입니다. `LinkedStateMixin`도 간단합니다. 그냥 `this.state`의 값과 `this.setState()`에서 호출되는 콜백을 필드로 가질 뿐입니다. + +### valueLink 없이 ReactLink 쓰기 + +```javascript +var WithoutLink = React.createClass({ + mixins: [React.addons.LinkedStateMixin], + getInitialState: function() { + return {message: 'Hello!'}; + }, + render: function() { + var valueLink = this.linkState('message'); + var handleChange = function(e) { + valueLink.requestChange(e.target.value); + }; + return ; + } +}); +``` + +`valueLink` prop도 간단합니다. 단순히 `onChange` 이벤트를 처리하고 `this.props.valueLink.requestChange()`를 호출하고 `this.props.value`대신 `this.props.valueLink.value`를 사용합니다. 그게 다에요!