React의 이벤트 처리 방식 개선 #24
yunseorim1116
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
SyntheticEvent
리액트의 SyntheticEvent는 브라우저의 네이티브 이벤트를 감싸는 리액트의 이벤트 래퍼입니다.
우리가 console에서 찍어보았던 e는 전부 브라우저가 아닌 리액트의 이벤트 객체입니다.
리액트 컴포넌트에서 이벤트 핸들러는 주로 인라인 방식으로 사용됩니다. 예를 들어 다음과 같은 코드입니다.
이벤트 위임
자바스크립트의 이벤트 위임 덕분에 여러 자식 요소에서 발생하는 동일한 유형의 이벤트를 부모 요소에서 한 번에 처리할 수 있습니다.
jsx <button onClick={handleClick}>Click Me</button>
이 코드는 마치 button 요소에 단순히 onClick 이벤트 핸들러를 부착하는 것처럼 보이지만실 제로는 그렇지 않습니다. 리액트 역시 이벤트 위임을 지원합니다. 하지만 17 버전 이전, 이 이벤트 시스템 작동 방식은 불안정했습니다 .
리액트의 이벤트 버블링
리액트의 이벤트 시스템은 모든 이벤트를 최상위 요소(document)에서 처리한 후 해당 이벤트가 어느 컴포넌트에서 발생했는지를 감지하여 적절한 컴포넌트로 이벤트를 버블링시킵니다. 리액트는 컴포넌트 내부에 직접 이벤트 핸들러를 등록하는 대신 상위 요소에 이벤트 핸들러를 중앙 집중적으로 등록합니다.
이런 방식은 특정 상황에서는 문제가 발생할 수 있습니다. 예를 들어 한 페이지에 여러 버전의 리액트가 존재하는 경우 각 리액트 버전은 이벤트를 독립적으로 최상위에 등록하게 됩니다. 이로 인해 이벤트 버블링이 여러 리액트 트리 사이에서 비정상적으로 동작할 수 있고,
e.stopPropagation()
같은 이벤트 전파 방지 함수가 제대로 동작하지 않는 경우가 발생할 수 있습니다.리액트 17 이후의 개선
리액트 17에서는 이러한 문제를 해결하기 위해 이벤트 핸들러를 document가 아닌 루트 DOM 컨테이너에 등록하도록 변경되었습니다.
각 리액트 애플리케이션이 서로 독립적으로 이벤트를 처리할 수 있도록 하여 이벤트 전파에 의한 예기치 않은 문제가 발생하지 않도록 했습니다. 이로 인해 한 페이지에 여러 리액트 트리가 존재하더라도 각 트리에서의 이벤트 전파가 독립적으로 관리됩니다.
Beta Was this translation helpful? Give feedback.
All reactions