리액트에서의 이벤트 처리
이벤트 핸들러 작성법
리액트에서 이벤트 핸들러는 JSX 문법 내에서 작성합니다. 이벤트는 HTML DOM 이벤트와 비슷하지만, 리액트에서는 onClick, onChange와 같이 CamelCase로 작성됩니다. 예를 들어, 버튼 클릭 시 동작할 이벤트는 onClick={handleClick}와 같이 설정할 수 있습니다. 이벤트 핸들러 함수는 보통 컴포넌트 내부에 정의하며, 해당 함수는 이벤트 발생 시 호출됩니다. 또한, 이벤트 핸들러는 반드시 함수로 전달해야 하며, 객체나 다른 값으로 전달할 수 없습니다.이벤트 객체와 this 바인딩
리액트 이벤트 핸들러에서 this를 사용할 때는 바인딩을 신경 써야 합니다. 클래스형 컴포넌트에서는 메서드 내에서 this를 사용하려면 해당 메서드가 this와 바인딩되어야 합니다. 이를 위해 constructor에서 this.handleClick = this.handleClick.bind(this)와 같은 방식으로 바인딩하거나, 화살표 함수 문법을 사용할 수 있습니다. 함수형 컴포넌트에서는 this가 필요 없으므로, this 바인딩을 신경 쓸 필요가 없습니다. 이벤트 객체는 기본적으로 이벤트가 발생한 DOM 요소에 대한 정보를 포함하고 있습니다.
이벤트 핸들러에서 인자 전달하기
이벤트 핸들러에 추가적인 인자를 전달하고 싶을 때는 함수형 이벤트 핸들러를 사용하는 방식으로 해결할 수 있습니다. 예를 들어, onClick={(e) => this.handleClick(e, 'additional argument')}와 같이 이벤트 객체와 함께 추가적인 값을 전달할 수 있습니다. 화살표 함수 문법을 사용하면, 이벤트 객체뿐만 아니라 필요에 따라 다른 값을 추가로 넘길 수 있습니다. 이런 방식으로 여러 값을 핸들러로 전달하여 이벤트 발생 시 추가적인 로직을 처리할 수 있습니다.폼 이벤트 처리
리액트에서는 폼 이벤트를 다룰 때, 상태 관리와 연계하여 동작합니다. 예를 들어, onChange 이벤트를 사용하여 입력 필드의 값을 실시간으로 업데이트하고, 이 값을 상태로 관리할 수 있습니다. onSubmit 이벤트를 사용하여 폼 제출 시 사용자 입력을 처리하고, 서버로 데이터를 전송할 수 있습니다. value와 onChange를 함께 사용하여 제어된 컴포넌트를 만들 수 있으며, 이를 통해 사용자 입력에 따른 상태를 효율적으로 관리할 수 있습니다. 예를 들어, onSubmit={handleSubmit}와 같은 방식으로 폼 제출 이벤트를 처리합니다.이벤트 전파와 기본 동작 막기
리액트에서는 이벤트 전파 및 기본 동작을 제어할 수 있습니다. 이벤트 전파를 막으려면 event.stopPropagation()을 사용하고, 기본 동작을 막으려면 event.preventDefault()를 호출합니다. 예를 들어, 폼 제출 시 페이지 리로드를 막고 싶을 때 event.preventDefault()를 사용하여 이를 방지할 수 있습니다. 이 방법을 통해 이벤트의 기본 동작을 취소하거나, 이벤트가 부모 요소로 전파되는 것을 막을 수 있습니다. 이러한 제어를 통해 복잡한 이벤트 로직을 유연하게 처리할 수 있습니다.