이벤트 처리: onClick과 onChange

목표: 리액트의 합성 이벤트를 사용해 클릭과 텍스트 변경을 처리하고, 브라우저마다 일관된 동작을 구현합니다.

• onClick은 동작을 실행합니다
• onChange는 입력값을 읽습니다
• 이벤트 객체에는 세부 정보가 담깁니다

처리 함수를 연결합니다: onClick={handle}. 함수는 작게 유지하고, 설정 함수로 상태를 업데이트합니다. 이전 값을 사용하는 경우에는 함수형 업데이트를 사용하는 것이 좋습니다.

onChange는 사용자가 입력 필드를 수정할 때 실행됩니다. event.target.value에서 텍스트를 읽고, 상태를 단일 기준 데이터로 유지합니다.

클릭할 때 값을 증가시키고, onChange로 입력값을 동기화하며, event.preventDefault()로 폼 제출에 따른 새로 고침을 방지합니다.

합성 이벤트는 일관성을 위해 브라우저 기본 이벤트를 감쌉니다. 처리 함수 안에서 값을 읽고, 처리 함수는 짧고 명확하게 유지합니다.

• 폼에서는 event.preventDefault()를 사용합니다
• 입력 필드에서는 event.target.value를 사용합니다

팁:

• DOM을 직접 변경하지 말고 상태가 사용자 인터페이스를 관리하게 하십시오.
• 처리 함수 안에 복잡한 로직을 인라인으로 넣지 말고 작은 함수를 호출하십시오.
• 이전 상태를 사용할 때는 함수형 업데이트를 사용합니다.

복습: 동작에는 onClick을, 입력 필드에는 onChange를 사용합니다. 값은 event.target.value에서 읽고, 필요할 때는 기본 폼 새로 고침을 방지합니다.