예제 코드 7.6 제어 컴포넌트 구현하기

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state = {accountNumber: ''} ---- 계좌번호 초깃값으로 빈 문자열을 설정한다.
    }
    handleChange(event) {
        console.log('Typed: ', event.target.value) ---- 콘솔에 입력한 내용을 그대로 보여준다.
        this.setState({accountNumber: event.target.value.replace(/[^0-9]/ig, '')}) ---- 입력 값에서 숫자만 걸러낸 후 상태를 갱신한다.
    }
    render() {
        return <div>
            Account Number:
            <input
                type="text"
                onChange={this.handleChange} ---- 변경을 감지한다.
                placeholder="123456"
                value={this.state.accountNumber}/> ---- value를 상태에 할당해서 엘리먼트를 제어한다.
            <br/>
            <span>{this.state.accountNumber.length > 0 ? 'You entered: ' + this.state.
            accountNumber: ''}</span> ---- 계좌번호가 빈 문자열이 아닌 경우에 출력한다. “length”는 문자열 속성으로 문자의 수를 반환한다. 값이 없는 경우에는 아무것도 출력하지 않는다.
        </div>
    }
}

---