📸 2023-01-08

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

프로그래머스 이모티콘 할인행사 - 자바스크립트를 푸는데 거의 이틀 걸렸다. 완전탐색으로 풀어야 한다는 힌트를 얻고도 어떻게 구현할지 생각하는 것에 많은 시간을 소요했다. 다른 개발자들의 답안을 봤는데 더 간단한데 그걸 완전히 이해하는데도 시간이 걸렸다. 남이 작성한 코드는 언제 봐도 어렵다…

연정이가 리액트의 이벤트 작동 원리에 관한 글을 하나 보내줬다. 다 이해하지는 못했지만 이제까진 이벤트 리스너를 붙인 요소에 그대로 붙을줄 알았는데 그게 아니라는걸 처음 알았다. 다음에 더 깊게 알게 되면 도움이 될까하여 간략하게 정리해둔다.

✅ 리액트 17버전부터 이벤트 핸들러를 Document 레벨이 아닌 리액트 트리가 렌더되는 root DOM container에 붙인다.
✅ NativeEvent를 그대로 사용하는 것이 아닌 SyntheticEvent 객체를 이용해서 NativeEvent를 감싸는 방식을 사용한다.
✅ NativeEvent 이름과 리액트 이벤트 핸들러의 Property를 매핑해주고 전체 NativeEvent를 순회하며 각 이벤트에 리액트 이벤트 핸들러를 등록한다. => 이 단계는 최초 렌더링이 되기 전에 이루어지므로 root DOM Node에 모든 이벤트 핸들러가 등록되어 있다.
✅ 이벤트가 발생하면 이벤트 객체로부터 해당 이벤트를 발생시킨 node를 찾고, 해당 node부터 root node까지 트리를 순회하면서 매칭되는 이벤트를 발견할 때마다 특정 큐에 저장한다.
✅ root node에 도달하면 큐에 들어간 순서대로 리스너 함수가 실행된다.

🐝 참고
콴다 팀블로그 - React Deep Dive— React Event System (1)
리액트(React)의 이벤트 핸들러(Event Handler) SyntheticEvent — nativeEvent