[React] 모달창 만들기

리액트 버전 모달창 만들기 >

우선, modal창을 관리할 useState(기본값 false)를 만들고, dim처리 할 부분을 useRef를 사용하여 접근한다.

const [isModalOpen, setIsModalOpen] = useState(false); //모달 상태 관리 : 기본값 - 닫힘
const dimmerRef = useRef(); // useRef를 활용하여 dim처리 해줘야 하는 부분

그리고 버튼을 눌렀을 때 모달을 보여주는 openModal 함수,
모달을 펼쳐져 있을 때만 닫아주는 closeModal 함수를 작성해준다.

  const openModal = () => {
    setIsModalOpen(true);
    // 모달을 열겠다.
  };

  const closeModal = () => {
    if (isModalOpen === true) return setIsModalOpen(false);
    //모달이 열렸을 때만 닫아주겠다. 
  };

이외에도 모달 컴포넌트 생성해서 우리가 모달을 보여줄 파일에 import 한다.
아래 코드와 같이 아무 곳이나 눌러도 닫을 수 있게 최상위에 closeModal함수를 넣어주고,
dimmer를 ref 사용해 접근하고, 모달이 열려 있을 때 dimmer를 보여준다.

<div className="detail" onClick={closeModal}>
      {isModalOpen && <div className="dimmer" ref={dimmerRef} />}
      <div className="leftContainer">
        <img
          src="https://static.zarahome.net/8/photos4/2021/I/4/1/p/9336/060/250/9336060250_2_7_3.jpg?t=1636044789265"
          alt="bgImg"
        />
        <img
          src="https://static.zarahome.net/8/photos4/2021/I/4/1/p/9336/060/250/9336060250_1_1_3.jpg?t=1633963340692"
          alt="bgImg"
        />
      </div>
</div>

느낀점 >

클론 프로젝트를 하면서 직접 구현하게 된 모달창에 대하여 기록해보았다.
사실 모달창은 제이쿼리로 구현해 본 적이 있는데 지금 생각해보면 정말 단순하게 addClass, toggleClass로 주어 구현했던 것 같다.
리액트 버전 모달창은 처음이라 쉽지 않았는데, 이렇게 기록해두고 반복해서 보면 리액트로도 편하게 구현할 수 있겠지? 그럴 거라 믿는다 !