코딩쌀롱

✱문제1. 체크박스 체크되는 영역 문제 : chakra UI의 Checkbox를 사용해서 선택하는 모달창을 만들었는데, Checkbox만 클릭해야 체크되고 그 외의 MenuItem 요소부분을 클릭하면 모달창이 닫히거나 체크되지 않는 문제 생각 : ui 라이브러리를 사용하지 않고, 직접 짰다면 label을 이용해서 쉽게 해결할 수 있는 문제인데.. 만들어진 걸 가져다 쓰려니까 내가 주는 className이나 data-id값이 어디에 저장되는지 알 수가 없어 많이 헤맸다. 해결 : MenuItem > ItemWrap, Checkbox 구조에서 MenuItem > Checkbox > ItemWrap 구조로 변경 체크박스 자식인 ItemWrap을 클릭해도 체크가 된다. 하지만 라벨 width === 아이템랩 w..

✏️Event Delegation 캡처링과 버블링을 활용하면 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다. 이벤트 위임은 유사한 여러 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 컨테이너에 하나의 핸들러를 할당 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링. ✱장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거..