[3장] 실무에서 useCapture,stopPropagation 사용?

[horang-e]

🧐 Question

1. 전 이번 장 공부하면서 useCapture자체의 존재에 대해 처음 알게 되었습니다..! 혹시 실무에서 useCapture=true 인 작업을 하실 때가 있으신가요? 있으시다면 어떤 이유로 사용했는지가 너무 궁금합니다! 🤩
2. stopPropagation을 사용하신 경험이나 이유또한 궁금합니다. 언제 사용해야 하는지가 궁금해서요!!

📝 Reference

[kimfield98]

e.stopPropagation()을 사용함으로써, 제출 버튼 클릭 이벤트가 부모 요소로 전파되는 것을 막고, 버튼의 고유 기능만 실행되도록 구현한 경험이 있습니다! 🙌🏻

function ToggleItemWithSubmitButton({ title, extra, content }) {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  const handleSubmitButtonClick = (e) => {
    e.stopPropagation();
  };

  return (
    <Flex vertical>
      <Flex onClick={handleToggle} justify="space-between" align="center" style={{ cursor: "pointer" }}>
        <Flex gap={16}>
          <MyComponent />
          <Flex gap={8} align="center">
            {title}
            {isExpanded ? <ArrowUpIcon /> : <ArrowDownIcon />}
          </Flex>
        </Flex>
        <div onClick={handleSubmitButtonClick}>{extra}</div>
      </Flex>
      {isExpanded && <div>{content}</div>}
    </Flex>
  );
}

stopPropagation()을 사용한 이유 (자세한 설명)

1. 전체 영역 클릭 가능: 기존에는 "여기에 제목을 입력"과 "화살표 아이콘"을 포함한 영역만 클릭 가능하도록 구현했기 때문에 사용하지 않았지만, 클라이언트의 요청에 따라 토글을 열기 위한 클릭 범위를 전체로 확장하며 문제가 발생했습니다.

2. 버튼 기능 분리: 컴포넌트 내부에 제출 버튼이 존재합니다(이것이 문제). 이 버튼은 토글 기능과는 별개로 작동해야 합니다.

3. 이벤트 버블링, 의도하지 않은 동작 방지: stopPropagation()을 사용하지 않으면, 제출 버튼을 클릭했을 때 버튼의 고유 기능(제출)이 실행되면서 동시에 부모 요소의 onClick 이벤트도 트리거되어 토글이 열리거나 닫히는 문제가 발생할 수 있습니다. 사용자가 제출 버튼을 클릭했을 때, 오직 제출 기능만 실행되고 토글의 상태는 변경되지 않아야 했기 때문에 stopPropagation()을 사용하게 되었습니다.

[Raihyul]

저도 이번에 stopPropagation은 처음 알았는데, 그 대신 preventDefault를 쓴 경험은 있어요!

(예시를 가져오고 싶었으나 폐기된 프로젝트여서 아무것도 남지 않는 바람에 말로 설명하자면...)

• DataTable 형식
• row 클릭 시 상세 페이지 이동
• row의 자식 요소 중 삭제 버튼 클릭 시 해당 데이터 삭제 확인 팝업 발생

이벤트 버블링 개념을 모르는 상태에서 구현을 했는데, 삭제 버튼을 클릭하면 자꾸 상세 페이지로 이동하는 현상이 발생해서 preventDefault를 사용해서 이벤트가 발생하는 걸 막았던 기억이 나요.

참고로 stopPropagation은 이벤트 전파 자체를 막지만, preventDefault는 이벤트 동작을 취소하는 방식이라는 점에서 차이가 있대요!