[react.js]onChange 사용법

※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다.


입력 폼을 예로 들어 설명하겠습니다.

UI구성하기

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
          />
        </div>
        <div>
          <ul>
            <li>input1</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Board;

 

App.js

import React, { Component } from 'react';
import Board from './components/Board';

class App extends Component {
  render() {
    return (
      <div>
        <Board />
      </div>
    );
  }
}

export default App;

App.js는 단순히 불러오는 용도 입니다. Board.js 는 입력폼이 윗쪽에 있고, 아랫쪽에 리스트가 작성됩니다.

 

state 적용

이제 state를 설정해주겠습니다.

import React, { Component } from 'react';

class Board extends Component {
  //state 추가
  state = {
    input1: ''
  };

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
          />
        </div>
        <div>
          <ul>
            <li>input1</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Board;

당연히 아무 작동도, 변화도 없습니다. 이제 handleChangeInput 이라는 함수를 만들어 제어해보겠습니다.

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: ''
  };
  num = 0;

  //input1 제어
  handleChangeInput1 = e => {
    this.setState({
      input1: e.target.value
    });
  };

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
            onChange={this.handleChangeInput1} //<- 추가
            value={this.state.input1} //<- 추가
          />
        </div>
        <div>
          <ul>
            <li>input1</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Board;

이제 input1을 제어 할 수 있게 됐습니다. 뭐가 변경됐냐고 궁금하신 분들도 있을텐데 input값의 변화를 예측해 state input값을 실시간으로 바뀌게 만들어줬습니다. state값을 다시 input1 value에 넣어줌으로써 값이 순환하는 거구요.

그래도 이해 안가시는 분들은 input을 하나 더 추가해보면 이해가 빠를것 같네요.

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: ''
  };
  num = 0;

  //input1 제어
  handleChangeInput1 = e => {
    this.setState({
      input1: e.target.value
    });
  };

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
            onChange={this.handleChangeInput1}
            value={this.state.input1}
          />
          
          //추가
          <input  
            type="text"
            name="input2"
            onChange={this.handleChangeInput1}
            value={this.state.input1}
          />
          
        </div>
        <div>
          <ul>
            <li>input1</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Board;

한개의 input 입력시 동시에 2개의 폼이 입력됩니다. state를 이용한 동시 제어가 가능하게 되는거죠.

각각 제어한다면 handleChangeInput2를 작성해주면 되겠죠? 그렇긴 한데... 매번 폼하나 추가할때마다 input을 입력해줘야한다면... 좀 비효율적이겠죠?

혹시 이 문법 아시나요?

const a = 'name';
const b = {
[a]: 'Grahams'}

console.log(b);
// {name: "Grahams"}

이 방법을 응용하면 손쉽게 코드 한번으로 여러가지 input을 제어 할 수 있습니다.

//input1 제어
  handleChangeInput1 = e => {
    this.setState({
      input1: e.target.value
    });
  };
  //input2 제어
  handleChangeInput2 = e => {
    this.setState({
      input2: e.target.value
    });
  };
  
  // -> 모든 input 제어
  handleChange = e => {
  	this.setState({
  		[e.target.name]: e.target.value
  	})
  }

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: '',
    input2: ''
  };
  num = 0;

  //추가: 모든 input 제어 
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
            onChange={this.handleChange} //변경
            value={this.state.input1}
          />
          <input
            type="text"
            name="input2"
            onChange={this.handleChange} //변경
            value={this.state.input2}
          />
        </div>
        <div>
          <ul>
            <li>input1</li>
          </ul>
          {JSON.stringify(this.state.input1 + '/' + this.state.input2)}
        </div>
      </div>
    );
  }
}

export default Board;

좀 더 코드가 깔끔해졌네요.

2019/10/11 - [프로그램 강좌] - [react.js]등록하기 예제