React에서 자주 발생하는 에러 모음

계속 업데이트 예정입니다.

onClick 이벤트 핸들러의 콜백 함수가 제대로 동작하지 않을 때

<F.FileNameSection>
        {fileList.map((file, i) => (
          <F.FileItem
            key={i}
            onClick={(event) => handleFileItemClick(event, file)}
            selected={file.key === activeFile?.key}
          >
            <ImgWrapper width='20px'>
              <img src={''} alt='' />
            </ImgWrapper>
            <span>{file.name}</span>
      
      		// 제대로 동작하지 않음
            <F.CloseBtn onClick={() => closeFile(file)}>✕</F.CloseBtn>
          </F.FileItem>
        ))}
      </F.FileNameSection>

위의 예제에서 F.CloseBtn 의 onClick 메소드가 이상하게 동작했다.

이유는 부모 태그인 F.FileItem 의 onClick 메소드가 자식한테도 전파되었기 때문이다. F.CloseBtn 을 클릭하면 두개의 콜백 함수가 한 번에 작동되는 오류였다.

해결 1

부모 태그의 이벤트 핸들러 실행 시 event.target을 검사한다.

event.currentTarget 은 이벤트 핸들러가 부착된 태그
event.target 은 이벤트가 실행된 태그(이벤트를 위임받은 자식 태그에서 실행되면 event.target 은 자식 태그를 가리킴)

두 값을 비교해서 이벤트 핸들러가 부착된 태그를 클릭했을 때만 실행되게 구현한다.

function handleFileItemClick(event: React.MouseEvent<HTMLElement>, file: CustomFile) {
  	
  	// target 검사
    if (event.target !== event.currentTarget) return;
    selectItem('editor', file);
  }

하지만 이 방법은 자식 태그 중에 button 태그의 클릭만 막는게 아니라 모든 자식 태그의 클릭을 막는다. 따라서 자식 태그 중에 span 태그를 클릭해도 클릭이 취소된다.

해결 2

두 번째 해결 방법은 event.stopPropagation() 메소드를 사용하는 방법이다.

event.stopPropagation() 메소드는 자식 태그에 부착된 이벤트 핸들러가 실행될 때 이벤트가 부모 태그로 전파되는 것을 막아준다.

따라서 이 메소드를 (자식 태그에서) 사용하면 자식 버튼을 클릭했을 때 부모 버튼의 onClick 이 실행되지 않는다.

function handleCloseBtnClick(event: React.MouseEvent<HTMLElement>, file: CustomFile) {
    event.stopPropagation();
    closeFile(file);
  }