ReactJS-양식

이 장에서는 React에서 양식을 사용하는 방법을 배웁니다.

간단한 예

다음 예에서는 다음을 사용하여 입력 양식을 설정합니다. value = {this.state.data}. 이를 통해 입력 값이 변경 될 때마다 상태를 업데이트 할 수 있습니다. 우리는 사용하고 있습니다onChange 입력 변경을 감시하고 그에 따라 상태를 업데이트하는 이벤트입니다.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

입력 텍스트 값이 변경되면 상태가 업데이트됩니다.

복잡한 예

다음 예에서는 자식 구성 요소의 양식을 사용하는 방법을 살펴 봅니다. onChange 메서드는 자식 입력에 전달 될 상태 업데이트를 트리거합니다. value화면에 렌더링됩니다. 유사한 예가 이벤트 장에서 사용됩니다. 자식 구성 요소에서 상태를 업데이트해야 할 때마다 업데이트를 처리 할 함수를 전달해야합니다 (updateState) 소품으로 (updateStateProp).

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

그러면 다음과 같은 결과가 생성됩니다.