e.stopPropagation()과 e.preventDefault()의 차이

e.stopPropagation()

- 현재 이벤트가 이벤트 버블링 또는 캡처링 과정을 통해 상위 또는 하위 요소로 전파되는 것을 막아줌

- 사용 예시: 버튼을 클릭했을 때 그 버튼을 포함하는 상위 요소에서도 클릭 이벤트가 처리되는 것을 막고 싶을 때 사용

e.preventDefault()

- 이벤트의 기본 동작을 취소할 때 사용

- 사용 예시: <a> 태그의 클릭 이벤트는 URL로의 이동을 하는 기본 동작을 가지고, 폼 제출 이벤트는 데이터 전송을 기본 동작으로 가지고 있는데, 이러한 기본 동작을 막아줌

적용

- 해당 아이템이 '완료' 상태일 때 클릭 이벤트 전파 방지를 위해 event.stopPropagation(); 사용

const TodoList = ({ items, onListClick, onItemClick }) => {
  const handleItemClick = (item, event) => {

    if(item.done == true){
    // 해당 아이템이 '완료' 상태일 때 클릭 이벤트 전파 방지
      event.stopPropagation();
    }
    else{
      onItemClick(item, event);
    }
  };

  return (
    <ul onClick={onListClick}>
      {items.map((item, index) => 
        <TodoItem item={item} key={index} onClick={(event) => handleItemClick(item, event)}/>)}
    </ul>
  );
}