모달 기능 구현 방법

모달 기능

모달을 구현하기 위해서 생각할 부분은

1. 어떤 버튼, 부분을 눌렀을 때 모달이 뜨고 사라져야한다.
2. 모달 바깥 부분을 누르면 모달이 사라져야 한다.
3. 모달 자기 자신을 누르면 사라지면 안된다.

이렇게 3가지를 고려해야 한다.

구현 방법

-1번

모달이 뜨고 사라는 부분을 구현하기 위해서는

  const onClickUserProfile = useCallback(() => {
    setShowUserMenu((prev) => !prev);
  }, []);

이렇게 state와 함수를 만들어서 구현하면 된다.

 

-2번

모달 바깥 부분을 누르면 모달이 사라져야 하는 기능은 하나의 큰 div를 만들고 그 안에 모달을 구현한다. 큰 div는 화면 전체를 차지 하도록 한다. position을 absolute로 만들어서 전체를 차지하게 하고 바깥을 누르면 모달이 꺼지는 함수를 활용해서 구현하면된다.

(왜인지 모르겠지만 배경색에 opacity를 적용한 부분을 클릭하면 모달이 사라지지 않아서 모든 opacity를 제거했다.)

 

-3번

2번까지 하면 다 구현되는데, 자기 자신을 눌러도 모달이 사라진다. 이것을 방지하기 위해서는

  const stopPropagation = useCallback((e: any) => {
    e.stopPropagation();
  }, []);

stopPropagation을 활용하여 모달을 닫는 함수가 전달되지 않도록 해야한다.