리액트 #08 - Forms

이번에는 리액트에서 Form을 어떻게 다루는 지에 대해서 알아봅시다.

---

리액트는 데이터의 흐름이 단방향입니다.

따라서 여러 폼에 변화하는 같은 값을 적용하려면, 따로 처리를 해주어야 합니다.

아래와 같이 초기 value 값을 state.data로 적용해주고, 이 후에 onChange로 변하는 값을

state로 갱신합니다.

App.js

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;

- 실행 화면 (입력 전)

- 실행 화면 (입력 후)

---

좀 더 복잡하게 한다면, 다음과 같이 할 수 있습니다.

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;