[React] ref 사용시 parent to children event bubbling

[Piehealthcare PoinT] 센터 전용 기록 템플릿 및 링크 관리 서비스를 개발하면서 만났던 문제를 해결했던 방법

지금은 사용하지 않는 기능으로 사라진 코드지만.. ^^..

■ 기능
: '+ 답변자 미디어 첨부' 버튼을 클릭했을 때 미디어를 첨부할 수 있는 간단한 기능

■ 에러사항
: 버튼을 클릭하고 미디어를 추가하는 하나의 기능 텀이 끝난 후에 곧바로 버튼이 클릭되어 미디어 첨부 화면이 띄워짐

■ 문제 파악
: 버튼을 한 번 클릭했을 때 AddMediaButton tag로 감싸져 있는 input에도 클릭 이벤트가 버블링되는 것 같음

■ 문제 해결
: 처음에는 간단하게 onClick에 propagation을 걸어 해결하고자 했지만 ref.current가 발생한 이후로 propagation을 진행하는건 input에도 영향을 미친 후에 실행되기 때문에 소용이 없었다는 것을 깨닫고 열심히 구글링을 진행했음

이렇게 상위 요소의 이벤트가 하위 요소에 전달되는 것을 이벤트 캡쳐링이라고 부르고 있었고, 해결을 위해서는 해당 이벤트 캡쳐가 발생할 때 버블링을 차단해야 했음

아래 첨부 코드처럼 onClickCapture 에 stopPropagation을 걸어주면 해결..!