React 3 - Form Input 다루기

React에서 값들을 동적으로 다루기 위해서는 state를 이용해야합니다.

 

무슨 소리냐 하면, Input 태그를 만들어서 그냥 값을 입력하려고 해도 그 값이 state가 아니라면 실시간으로 변수에 읽어들일 수 없다는 걸 의미합니다.

 

input태그를 다루기 위해선 onChange 이벤트를 이용해서 setState를 실행시켜 state값에 실시간으로 들어오는 값들을 바꿔주어야 합니다.

 

FormExample.js를 하나 만들어보도록 하겠습니다.

import React from 'react'
class FormExample extends React.Component{

    constructor(){
        super();
        this.state = {
            name:'',
            email:'',
        }
    }

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} />
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} />
                    <br />
                    <button type="submit">Submit</button>
                </label>
            </form>
        )
    }
}

export default FormExample

이렇게 만들고 input값에 아무리 값을 넣어도 state에 값이 실시간으로 들어가질 않습니다.

 

input태그가 작동하질 않으니 onChange를 이용해서 state값을 실시간으로 바꿔주는 handleChange 함수를 만들어보겠습니다.

  handleChange(event) {
        this.setState({ [event.target.name]: event.target.value });
      }

이 함수를 추가해주고

 

 <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Submit</button>
                </label>

이렇게 onChange 이벤트에 해당 함수를 넣어주면 되겠습니다.

 

하지만 이렇게 하면 오류가 발생합니다.

 

왜일까요?

 

hnadleChange안에서 사용한 this는 누가 될까요? 이벤트가 일어난 노드가 대상이 됩니다.

 

대상 노드에겐 당연히 setState가 존재하질 않죠. 그렇기 때문에 undefined 에러가 납니다.

 

이 에러를 해결하기 위한 방법은 2가지가 있는데,

 

하나는 해당 함수의 this의 바인딩을 바꿔주는 것,

 

두번째는 함수를 화살표 함수로 바꿔주는 것입니다.

 

간단하게 화살표 함수로 바꿔주도록 하겠습니다.

 

import React from 'react'
class FormExample extends React.Component{

    constructor(){
        super();
        this.state = {
            name:'',
            email:'',
        }
    }
    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
      }
  

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Submit</button>
                </label>
            </form>
        )
    }
}

export default FormExample

자 이렇게 해주면 state값과 연동되는 input을 만들었습니다.

 

내친김에 handleSubmit도 만들어보도록 하죠

 

import React from 'react'
class FormExample extends React.Component{

    constructor(){
        super();
        this.state = {
            name:'',
            email:'',
        }
    }
    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
      }

    handleSubmit = (event) =>{
        event.preventDefault();
        const {name, email} = this.state;
        console.log('Name : ', name)
        console.log('Email : ', email)

    }
  

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Submit</button>
                </label>
            </form>
        )
    }
}

export default FormExample

handleSubmit 함수를 만들어 name과 email을 console에 찍어보았습니다.

 

이제  input태그 안의 값들을 수정하고 주고받을 수 있겠군요!!