React 이벤트 핸들링 가이드

버튼을 클릭했을 때 웹 페이지 전체가 새로고침되나요? 입력창에 타이핑을 하는데 상태(state)가 업데이트되지 않나요? React에서 이벤트를 올바르게 처리하지 않으면 이러한 문제에 직면할 수 있습니다.

이벤트 핸들링이란 클릭, 제출(submit), 또는 변경(change)과 같은 사용자의 동작을 포착하고 이에 대응하는 것을 의미합니다. React는 SyntheticEvent라는 시스템을 사용합니다. 이를 통해 Chrome, Safari, Firefox와 같은 모든 브라우저에서 코드가 동일하게 작동하도록 보장합니다.

HTML과 React 이벤트의 주요 차이점:

• 명명 규칙: React에서는 camelCase를 사용합니다. onclick 대신 onClick을 사용하세요.
• 핸들러: React에서는 함수 참조를 전달합니다. 문자열 대신 중괄호를 사용하세요.
• 방지: 브라우저의 기본 동작을 중단하려면 항상 event.preventDefault()를 호출하세요.

React의 이벤트 처리 방식:

React는 모든 노드에 개별적으로 리스너를 부착하지 않습니다. 대신 Event Delegation을 사용합니다. 루트 요소에 단일 리스너를 부착함으로써 메모리를 절약하고 성능을 향상시킵니다.

자주 사용되는 패턴:

• 클릭 카운터: 사용자가 버튼을 클릭할 때 상태를 업데이트하기 위해 함수를 사용합니다.
• 폼 핸들링: 하나의 함수로 여러 입력 필드를 업데이트하려면 event.target.name과 event.target.value를 사용하세요. 페이지 새로고침을 방지하려면 폼 제출 시 항상 event.preventDefault()를 사용해야 합니다.
• 인자 전달: 함수에 ID를 전달해야 하는 경우 화살표 함수를 사용하세요. onClick={() => handleDelete(id)}와 같이 작성해야 합니다. onClick={handleDelete(id)}라고 작성하지 마세요. 렌더링 중에 함수가 즉시 실행되기 때문입니다.

주의해야 할 실수:

• 무한 루프: onClick 속성에서 함수를 직접 호출하지 마세요. 이는 렌더링 중에 상태 업데이트를 트리거하여 다시 렌더링을 유발합니다.
• 정의되지 않은 이벤트: preventDefault()를 호출해야 하는 경우 함수 정의에 항상 event 파라미터를 포함하세요.
• 메모리 누수: useEffect 훅에서 window.addEventListener와 같이 수동으로 리스너를 추가한 경우, 반드시 cleanup 함수에서 이를 제거해야 합니다.

성능을 위한 모범 사례:

• 리스트가 매우 큰 경우 .map() 루프 내부에서 새로운 함수를 생성하는 것을 피하세요.
• 자식 컴포넌트에 핸들러를 전달할 때는 useCallback 훅을 사용하세요.
• 앱의 속도를 유지하기 위해 커스텀 이벤트 리스너를 정리(clean up)하세요.

이벤트를 마스터하는 것이 인터랙티브한 React 애플리케이션을 구축하는 핵심입니다.

출처: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69