더북(TheBook)

4.2.4 input 여러 개를 핸들링

 

자, 우리는 input 값을 state에 넣는 방법을 배웠습니다. 하지만 input이 여러 개일 때는 어떻게 작업할까요? 메서드를 여러 개 만들면 될까요? 물론 그것도 하나의 해법이기는 합니다만, 더 쉽게 처리하는 방법이 있습니다.

바로 event 객체를 활용하는 것입니다. e.target.name 값을 사용하면 됩니다. onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킵니다. 지금은 message겠죠? 이 값을 사용하여 state를 설정하면 쉽게 해결할 수 있습니다. 코드를 한번 살펴봅시다.

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