마운트 => add 붙고 언마운트돼야 => remove
기본적으로 layout 언마운트가 안됨
디펜던시 달면useEffect가 새로 발동하니까
일단 언마운트로 remove발생하는데 다시 마운트돼서 add 붙는게 아닌가?
useEffect를 통해 addEventListener
=> 이벤트리스너는 한번 호출하면 데이상 메모리 차지 x
또호출하면 메모리 차지
PeopleCount 내부에서의 클릭을 제외하고 외부 클릭 시에만 닫히도록 하려면, 이벤트 버블링과 이벤트 캡쳐링을 활용해야 합니다.
이벤트 버블링은 특정 HTML 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 HTML 요소로 전달되는 특성을 말합니다. 반면에 이벤트 캡쳐링은 이벤트가 최상위 요소에서부터 이벤트가 발생한 요소까지 도달하는 과정을 말합니다.
이런 특성을 활용하여, PeopleCount 컴포넌트 내부에서 발생하는 클릭 이벤트를 캡쳐링 단계에서 잡아내고, 이벤트 전파를 중지시키는 방법이 있습니다. 이를 위해선 event.stopPropagation() 메서드를 활용하면 됩니다.
이를 PeopleCount 컴포넌트에 적용해보면,
