파일선택을 클릭하면 파일창이 2번 실행됐던 이유? / 이벤트 버블링

 

"파일 선택" 기능을 커스텀된 UI로 사용하고 싶어 아래와 같이 코드를 작성했는데 ....

 

   <div onClick={() => {
                  console.log('파일선택 클릭 ');
                  fileInputRef.current?.click();
                }}
              >
                <label htmlFor="fileInput">파일 선택</label>
                <input
                  type="file"
                  id="fileInput"
                  ref={fileInputRef}
                  accept="image/jpeg, image/png, image/gif, image/webp, video/mp4, audio/mp3"
                  style={{ display: 'none' }}
                  onChange={handleFileSelect}
                />
              </div>

 

 

왠걸 "파일선택"을 클릭하면 파일 탐색기(?) 파일 선택하는 창이

처음 실행이 되고 사진을 선택하니 한번 더 파일선택 창이 열리는게 아닌가

 

 

?????

 

 

진짜 감이 안와서 (순간 리액트 strict모드인가 했는데 그건 아니었음) 원인을 찾아보니

바로바로 이론적으로(?)만 듣고 체감한적은 없던 "이벤트 버블링"에 따라 발생한 현상이었다. 

클릭 이벤트가 onClick 핸들러를 통해 실행되는동안 해당 요소의 부모 요소들한테도 전달이 되어갔던 것!!! 

따라서 이벤트 버블링을 막기 위해 stopPropagation() 함수를 사용하면 된다고 했다(이벤트 함수)

 

아래는 수정된 코드

  onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                  fileInputRef.current?.click();
                  e.stopPropagation();
                }}

이렇게 코드를 수정하니 정상적으로 파일 선택창이 한번만 열리게 되어따 ㅎ.ㅎ