9화: Responding to Events

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash 의 Carolina 님 사진

공식 문서

https://react.dev/learn/responding-to-events

Responding to Events – React

이벤트 핸들러?

• 보통 컴포넌트 안에서 정의됨
• 컨벤션: handle + 해당 이벤트의 이름
• inline event handler function을 쓸 경우 익명 함수로 쓰기도 함

하지만 이벤트 핸들러의 이름을 handleButtonClick 처럼 짓는 게 맞을까?
최근에 우아한테크코스 미션을 진행하면서 코드 리뷰어분이 추천해 주신 아티클을 인용해 본다.

 

이벤트 핸들러를 대하는 개발자의 자세

onclick 이벤트의 이벤트 핸들러 함수의 이름이 onclick인 경우나 혹은 이벤트 핸들러가 인라인으로 정의된다면 이벤트가 발생했을 때 어떤 작업을 수행하는지는 이벤트 핸들러 함수의 코드를 하나하나 읽어야만 알 수 있다. 네이밍 즉 대상에 이름을 지어준다는 건 이름으로 그 대상이 무엇인지를 설명해 사람이 코드를 읽기 쉽게 만들겠다는 의도인데 이름에서 주는 정보가 전혀 없다. 함수 이름을 함수라고 지은 것과 다를 게 없다.

이벤트 핸들러의 역할은 이벤트라는 메시지를 해석해 메소드의 실행으로 변환하는 것이다.

 

단순히 handleButtonClick 으로 짓고 그 안에 로직을 넣는다면 일 년 후의 내가 봤을 때 한 번에 이해할 수 있을까? 나는 자신있게 아니라고 답할 수 있다. 위 아티클의 내용은 두 가지로 요약할 수 있다. 첫째, 이벤트 핸들러의 이름에 해당 핸들러가 하는 일을 표현하기. 둘째, 이벤트 핸들러 속에서 이벤트 객체를 해석하는 로직이 아닌 실제 side effect를 수행하는 로직은 메서드로 분리하기(이렇게 하면 해당 메서드를 테스트하기도 쉽다). 리액트 공식 문서에서 제안하는 이 컨벤션이 과연 좋은 것인가는 한번쯤 의심해 볼 만하다고 생각한다.

이벤트 핸들러 추가하기

1. 컴포넌트 안에서 이벤트 핸들러 함수 정의
2. 해당 함수 안에 로직 넣기
3. JSX에 prop으로 이벤트 핸들러 함수 넘겨주기

이벤트 핸들러 안에서 props 읽기 가능

컴포넌트 내부에서 정의되니까 ㅇㅇ..

이벤트 핸들러를 props로 자식에게 넘겨주기

• 부모 컴포넌트가 자식의 이벤트 핸들러를 만들어서 넘겨줌
• 버튼 같이 범용성 높은 컴포넌트들은 스타일만 잡혀 있고 기능은 담겨 있지 않는 경우가 많은데, 이럴 때 맛있게 쓸 수 있음

이벤트 핸들러 props 이름 짓기

• <button>이나 <div> 같은 이미 만들어져 있는 컴포넌트들은 브라우저 이벤트 이름만을 지원함 (예: onClick)
• 내가 만드는 컴포넌트는 내 맘대로 이름 짓기 가능
• 컨벤션: on 으로 시작하는 camelCase
• 컴포넌트가 여러 상호작용을 지원할 경우 앱의 기능에 맞춘 이름을 지을 수도 있음

이벤트 전파

• onClick 같은 거로 이벤트 버블링 가능: 자식 먼저, 그 다음 부모
• 이벤트 캡처링을 원한다면 onClickCapture처럼 뒤에 Capture를 붙이면 됨
• onScroll 은 전파되지 않음
• 핸들러 내에서 event.stopPropagation(), event.preventDefault() 등 사용 가능

이벤트 핸들러는 side effect를 가져도 되나요?

• 그럼요
• 이벤트 핸들러는 순수함수일 필요 없음