로그인 기능 모달창으로 구현

리액트에서 모달

useState로 모달창 열리고 닫힌 상태 관리

모달창 열렸을 때 배경 어둡게 하고 싶었는데 마음대로 안됨.

useRef 이용해서 index의 제일 상단 div에 ref를 주고 이놈을 배경으로 사용

—> isOpen일 때 ref의 배경 어둡게 이런 느낌!

// 모달창 제어
  const [isOpen, setIsOpen] = useState<boolean>(false);

  useEffect(() => {
    // 처음 랜더링 시에 모달창 닫힌 상태로
    setIsOpen(false);
  }, []);

  // 모달창 노출
  const handleModal = () => {
    setIsOpen(!isOpen);
  };

  const modalBackground = useRef<HTMLDivElement>(null);
  const handleModalCloseBackground = (e: React.MouseEvent) => {
    if (e.target === modalBackground.current) {
      setIsOpen(false);
    }
  };
	// 기본으로 설정
  if (isOpen) {
    modalBackground.current?.classList.add('shadow');
  } else {
    modalBackground.current?.classList.remove('shadow');
  }

useState useRef 타입 지정해줄 때 잘 생각해보면 됨. 코드 보고 생각