더북(TheBook)

정규표현식(http://mng.bz/r7sq)과 문자열의 replace 메서드(http://mng.bz/2Qon)를 이용해서 숫자가 아닌 입력 값을 제거했다. replace(/[^0-9]/ig, '')는 복잡하지 않은 정규표현식을 사용한 메서드로 숫자가 아닌 입력 값을 빈 문자열로 치환한다. ig는 대소문자 구분을 하지 않는 것, 문자열 전체에서 일치 항목을 찾는 것을 의미한다.

render()의 입력 영역은 value={this.state.accountNumber}로 설정되어 있으므로 제어 컴포넌트다. 예제의 계좌번호 영역을 브라우저에서 직접 입력해보면 숫자만 입력할 수 있는데, React가 새로운 상태를 숫자만 있는 값으로 걸러내어 설정하기 때문이다. 그림 7-9에서 확인할 수 있다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.