ssjeu_

버블링, 캡쳐링 이벤트 위임 리액트에서 이벤트 처리 2. 이벤트 위임 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식이다. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어한다. 동적인 요소들을 처리하기 수월하고 이벤트 핸들러를 더 적게 등록해주기 때문에 메모리를 절약할 수 있다는 장점이 있다. 하위 요소가 많아질수록 이벤트리스너를 다는 작업이 번거롭기 때문에 이벤트 위임을 사용하는 것이다. 이벤트 위임은 유사한 요소에 동일한 핸들러를 적용할 때 주로 사용하지만 꼭 이런 경우에만 사용할 수 있는 것은 아니다. 이벤트 위임은 다음과 같은 알고리즘으로 동작한다. 컨테이너에 하나의 핸들러를 할당한다. 핸들러의 event.target을 사용해 이벤트가 발생한 요소가..

버블링, 캡쳐링 이벤트 위임 리액트에서 이벤트 처리 1. 이벤트 관리 - 버블링, 캡쳐링 이벤트란? 📍 이벤트: 클릭이나 스크롤을 내리는 등 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것 이벤트는 무언가 일어났다는 신호로 모든 DOM 노드는 이런 신호를 만들어 낸다. 참고로, 이벤트는 DOM에만 한정되진 않는다. DOM Event 예시 마우스 이벤트: click(마우스 왼쪽 클릭), contextmenu(마우스 오른쪽 클릭), mouseover, mouseout, mousedown, mouseup, mousemove 키보드 이벤트: keydown(키보드 누를 때), keyup(키보드 뗄 때) 폼요소 이벤트: submit, focus CSS 이벤트: transitionend(애니메이션이 종료..

리액트 상태 관리 종류를 알아보기 앞서 리액트 프로젝트에서 일반적으로 사용하는 상태(state) 를 세 가지로 구분하면 다음과 같다. Local State: 리액트 컴포넌트 안에서만 사용되는 state Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state Server State: 서버로부터 받아오는 state 기존에는 리덕스와 같은 상태 관리 라이브러리에 Global State와 Server State를 전부 포함하는 방법으로 프로그래밍하였다. 최근 들어 data fetching 라이브러리를 사용함으로써 상태 관리 라이브러리에서 비동기 로직(Server State)을 제거하여 관심사가 분리되고 선언적으로 프로그래밍할 수 있게 되었다! 2020년부터 Re..