[React] 원하는 태그 바깥부분 클릭시 함수 실행하기

todo 리스트를 구현하다가 버그를 발견했다.

첫번째 투두리스트를 수정하고 있던 도중 두번째 투두리스트를 수정하게되면 둘이 동시에 같은 내용으로 수정되는 버그이다.

투두 수정 중 다른 투두를 수정할때는 처음에 수정했던 투두의 수정모드를 해지해야겠다고 판단했다.

어떻게 처음 수정했던 투두의 수정모드를 해지할까 고민하다가,

수정하고 있는 input영역에 ref를 주고 이 부분 바깥 클릭시에 수정모드가 해제되도록 구현했다.

 

import { useRef } from 'react';

const inputRef = useRef<HTMLInputElement>(null);

useRef를 불러오고 변수로 설정해준다.

 

<S.EditInput value={updateTodo} onChange={(e) => setUpdateTodo(e.target.value)} ref={inputRef} />

editMode가 참일때만 나오는 Input에 아까 만든 ref를 넣어준다.

 

  useEffect(() => {
    function handleOutSideClick(e: MouseEvent) {
      if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
        setEditMode(false);
      }
    }
    window.addEventListener('mousedown', handleOutSideClick);
  }, [inputRef]);

그리고 useEffect를 사용하여 함수를 만들어주고 이 함수는 현재 input의 ref값이 존재하고 타겟을 포함하지 않으면(타겟 외의 다른 영역 클릭시) editMode에 false를 넣어주었다.

 

그리고 window.addEventListener를 이벤트로 넣어서 mouseDown일때 위의 함수를 실행하도록 했다.

mouseDown은 자바스크립트에서 마우스 왼쪽버튼을 누를때 발생하는 이벤트이다.

 

 

즉, 윈도우에서 mouseDown이벤트가 일어날때마다 handleOutsideClick 함수를 실행하여 타겟 외의 다른 영역 클릭시 editMode에 false를 넣어주어 editMode를 해제하여 수정을 동시에 하는 버그를 막았다.