리액트 폼 바인딩 React Form Binding

리액트에서 폼의 데이터를 바인딩 하는 방법은 value와 값이 변경됐을때의 이벤트를 부모컴포넌트에서 props로 전달해주고

자식컴포넌트에서 값의 변경이 일어나면 부모컴포넌트에서 받은 이벤트를 실행하는 방법을 사용해야 한다.

리액트는 데이터가 부모에서 자식으로 단방향으로 흐르기 떄문에 양방향바인딩을 구현하려면 이런 방법을 사용해야 한다.

text 바인딩

class InputTextBind extends Component {
    state = {
        name: '',
        age:''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    render() {
        return (
            <form>
                <input
                    value={this.state.name}
                    onChange={this.handleChange}
                    name="name"
                />
                <div>{this.state.name}</div>
                <input
                    value={this.state.age}
                    onChange={this.handleChange}
                    name="age"
                />
                <div>{this.state.age}</div>
            </form>
        );
    }
}

value를 컴포넌트 내의 state의 값과 바인딩하고 change 이벤트 발생시에 값을 setState를 해주는 형태이다.

input이 여러개인 경우 input 태그에 name 속성을 넣어 handleChange 함수에서 파라미터로 받은 event에 들어있는

e.target에 name으로 구분을 하여 값을 업데이트 한다.

결과

Select 바인딩

select 바인딩의 경우는 value를 state.selectedValue와 바인딩하고 

option을 state.selectList 를 리스트 렌더링 형식으로 렌더링 한다.

class SelectBind extends Component {
    state= {
        selectedValue: '',
        defaultValue: '선택하세요',
        selectList:[
            {text:'A', value: '1'},
            {text:'B', value: '2'},
            {text:'C', value: '3'}
        ]
    }
    handleChange = (e)=>{
        this.setState({
            selectedValue: e.target.value
        })
    }
    render() {
        const selectList = this.state.selectList
        const list = selectList.map(option=>(<option key={option.value} value={option.value}>{option.text}</option>))
        return (
            <form>
                <select value={this.state.selectedValue} onChange={this.handleChange}>
                    <option>{this.state.defaultValue}</option>
                    {list}
                </select>
            </form>
        );
    }
}

참고

https://reactjs.org/docs/getting-started.html

https://velopert.com/reactjs-tutorials