패스트캠퍼스 챌린지 24일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

수강 인증샷

---

패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

---

24일차

 24일차에는 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 07. 이벤트 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 02. 공식 문서로 디테일잡기(초급) 챕터에서 07. 이벤트 강의에서는 SyntheticEvent라고 부르는 합성 이벤트에 대해 공부하고 이벤트를 처리하는 방법에 대해 공부한다. 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤트 래퍼 SyntheticEvent 객체를 전달받는다. preventDefault()를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작한다. 하지만, 브라우저의 고유 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조해야 한다. 합성 이벤트는 브라우저의 고유 이벤트의 직접 대응되지 않으며 다르기 때문이다. React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링 될 때 리스너를 제공하면 된다.

 다음으로, 부모 - 자식 element 간에 일어나는 캡쳐링과 버블링을 실습을 통해 공부하는 시간을 가졌다. 방향으로 생각하면 이해하기 쉬운데 캡쳐링은 위에서 아래로 내려가고 버블링은 아래에서 위로 올라가는 것이라고 생각하면 된다. 예를 들어 div 태그 안 div 태그 안에 버튼을 두고 각각의 div 태그 안에 캡처를 두고 버튼을 감싸는 div 태그 안에 버블을 두었을 때, 버튼을 누르면 가장 바깥쪽 div부터 캡쳐링을 진행하고 그다음 버튼의 클릭이 동작하며 버튼을 감싸는 div 태그 안에서부터 버블링이 진행된다.

---

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 

---

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC