react.dev/docs/10.2-form-input-binding-sugar.ko-KR.md

id	title	permalink	prev	next
two-way-binding-helpers-ko-KR	양방향 바인딩 핼퍼	two-way-binding-helpers-ko-KR.html	animation-ko-KR.html	class-name-manipulation-ko-KR.html

ReactLink는 React에서 양방향 바인딩을 표현하는 쉬운 방법입니다.

주의:

프레임워크를 새로 접하신다면, 대부분의 애플리케이션에서 ReactLink는 필요없고 신중히 사용하셔야 함을 알려드립니다.

React에서 데이터 흐름은 소유주에서 자식으로의 단방향입니다. 이는 폰 노이만 컴퓨팅 모델의 데이터가 단방향으로 흐르기 때문입니다. 이것을 "단방향 데이터 바인딩"으로 생각하셔도 됩니다.

하지만 많은 애플리케이션에서 데이터를 요청해서 프로그램으로 돌려줍니다. 예를 들어, 폼을 개발한다면, 사용자 입력을 받았을 때 state를 바꾸거나, JavaScript안에서 레이아웃을 바꾸고 그에 따라 어떤 DOM 엘리먼트의 크기를 바꾸게 하고 싶을 수도 있습니다.

React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DOM)에서 읽어 컴포넌트에서 setState()를 호출하는 식으로 할 수 있습니다. "데이터 흐름 반복을 제한"하면 더 이해하기 편하고, 쉽게 유지보수할 수 있는 프로그램이 만들어지는 것은 명확합니다. 더 자세한 내용은 폼 문서를 확인하세요.

양방향 바인딩(묵시적으로 DOM의 어떤 값은 React state와 일치하도록 강제하는 것)은 간결하기도 하고 다양한 애플리케이션을 지원 할 수 있습니다. React는 ReactLink를 제공합니다. 이는 위에서 설명한 일반적인 데이터 흐름 반복 패턴을 설정하거나, 어떤 데이터 소스를 React state로 "링크하는" 편의 문법입니다.

주의:

ReactLink는 얇은 레퍼고 onChange/setState()패턴 부분의 관례일 뿐입니다. React 애플리케이션에서의 데이터 흐름을 근본적으로 바꾸지는 않습니다.

ReactLink: 적용 전후

ReactLink를 사용하지 않는 간단한 폼 예제입니다.

var NoLink = React.createClass({
  getInitialState: function() {
    return {message: '안녕!'};
  },
  handleChange: function(event) {
    this.setState({message: event.target.value});
  },
  render: function() {
    var message = this.state.message;
    return <input type="text" value={message} onChange={this.handleChange} />;
  }
});

이것은 정말 잘 동작하고, 데이터가 어떻게 흐르는지 매우 명확하게 보여지지만, 폼필드가 많을 경우 약간 장황해 질 수 있습니다. 타이핑을 줄이기 위해 ReactLink를 사용해 보겠습니다.

var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

LinkedStateMixin는 React 컴포넌트에 linkState()라는 메서드를 추가합니다. linkState()는 React state의 현재 값과 그것을 변경할 때의 콜백을 가지는 ReactLink 객체를 리턴합니다.

ReactLink 객체는 props로 트리의 위나 아래로 넘길 수 있어서, 쉽고 명확하게 계층구조에서 깊이 있는 컴포넌트와 높이 있는 state 사이의 양방향 바인딩을 설정할 수 있습니다.

checkbox의 value 어트리뷰트는 다른 것과 다르게 checkbox가 체크되었을 때 폼 submit에 값이 전달되는 것에 주의하세요.(기본값 on) 그래서 value 어트리뷰트는 checkbox가 체크되거나 해제될 때 업데이트되지 않습니다. checkbox에서는 valueLink대신 checkedLink를 사용하셔야 합니다.

<input type="checkbox" checkedLink={this.linkState('booleanValue')} />

내부 구조

ReactLink에는 크게 인스턴스를 생성하는 면과 사용하는 면이 있습니다. ReactLink가 얼마나 간단한지 확인하기 위해, 이 부분들을 보다 명시적으로 고쳐 봅시다.

LinkedStateMixin 없이 ReactLink 쓰기

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 <input type="text" valueLink={valueLink} />;
  }
});

보시다시피, ReactLink 객체는 value와 requestChange prop만 가지는 매우 간단한 객체입니다. LinkedStateMixin도 간단합니다. 그냥 this.state의 값과 this.setState()에서 호출되는 콜백을 필드로 가질 뿐입니다.

valueLink 없이 ReactLink 쓰기

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 <input type="text" value={valueLink.value} onChange={handleChange} />;
  }
});

valueLink prop도 간단합니다. 단순히 onChange 이벤트를 처리하고 this.props.valueLink.requestChange()를 호출하고 this.props.value대신 this.props.valueLink.value를 사용합니다. 그게 다에요!