심심하기도 하고 그래서 간단한 todolist 다시 만들다가 엉뚱한 실수를 반복했다.

  const handleModifySubmit = (e) => {
    e.preventDefault();
    onUpdate({ ...todo, text: modifyText });
    handleModifyStatus();
  };

{modifyStatus ? (
        <li>
          <input
            type="checkbox"
            id="checkbox"
            checked={status === "completed"}
            onChange={handleStatus}
          />
          <label htmlFor="checkbox">{text}</label>

          <button onClick={handleDelete}>
            <AiTwotoneDelete size="20px" />
          </button>

          <button onClick={handleModifyStatus}>
            <AiFillEdit size="20px" />
          </button>
        </li>
      ) : (
        <form>
          <input
            type="text"
            onChange={handleModifyText}
            defaultValue={text}
          ></input>
          <button
            onClick={handleModifySubmit}
            disabled={modifyText.trim() !== "" ? false : true}
          >
            <AiFillEdit />
          </button>
        </form>
      )}

아니 수정하려고 수정완료 버튼을 클릭하면 자꾸 새로고침되서 리렌더링되길래
무슨일이람하고 고민하다가 갑자기 아 e.preventDefault()를 안해준것이 떠올랐다. 기본적인 내용이었는데 왜 벌써 잊었을까 이럴때는 블로그에 적어야지 했는데 전에 e.preventDefault();, e.stopPropagation() 두개를 가끔씩 헷깔려했던 기억이 나서 두개를 비교해보았다.

event.preventDefault()

e.preventDefault()의 역할은 기본으로 정의된 이벤트를 작동하지 못하게하는 메서드이다.
예를 들어 <a>태그같이 페이지 이동을 해주는 태그들에게 e.preventDefault()메서드를 실행시켜주면 페이지 이동을 막아준다.

event.stopPropagation()

전에 밥모건프로젝트 당시 모달창을 만들었다. 세상에 닫기 버튼과 모달창 외부의 화면을 클릭했을때에만 닫혀야하는데 모달창 내부만 클릭해도 닫혀버려서 당황했었다.
이건 전에도 기재했던 이벤트 버블링 (자식element에서 발생한 이벤트가 부모 element순으로 전달되는 현상) 인데, 얘를 막아주려면 사용하는게 event.stopPropagation();메서드이다.
이벤트의 전파는 막아주지만 그렇다고 해서 기본이벤트를 막아주진 않는다.