JavaScript Sec05_1 React에서 사용자 입력 처리하기

input 태그로 사용자 입력 처리하기

---

• onChange라는 이벤트를 사용하여 input에 어떤 값이 입력되었을 때 그 값을 어떻게 처리할 것인지 작성한다.
• onChange는 input의 값이 바뀌었을 때 수행하는 이벤트이다.
• onChange prop에는 콜백함수를 전달한다.
• 이 때 onChange 이벤트에 등록되는 콜백함수는 이벤트 객체 e를 매개변수로 전달받는다.
• e.target 은 이벤트 객체의 target을 의미하고 여기서는 input 태그를 의미한다.
• e.target.value는 입력 필드에 입력된 값을 의미하는데, 상태 변화 함수인 setAuthor의 인자에 e.target.value를 넣으면 state의 값이 이 값으로 업데이트 된다.

textarea 태그로 사용자 입력 처리하기

---

• input 태그로 사용자 입력을 처리하는 것과 동일하다.

동작이 비슷한 state들을 하나의 state로 묶을 수 있다.

• state의 초기값을 설정할 때 객체로 설정하면 여러 state를 다룰 수 있다.
• 이벤트가 발생했을 때 상태 변화 함수는 새로운 객체를 인자로 받아야 한다!

spread 연산자 이용

• 만약 state가 갖고 있는 객체의 프로퍼티 개수가 너무 많으면 spread 연산자를 사용하면 된다.

이벤트 처리 함수도 하나로 묶을 수 있다.