[React] 모달을 사용하다 발생한 에러

모달컴포넌트를 만들어보장

예전에 토이프로젝트를 진행하면서 React를 사용하여 공용으로 사용하는 모달 컴포넌트를 만들었었다.

// 모달 컴포넌트
function Modal({ visible, closeModal, children }) {
  return (
    <div className="Modal">
      <ModalContainer visible={visible}>{children}</ModalContainer>
      <ModalWrapper visible={visible} onClick={closeModal}></ModalWrapper>
    </div>
  );
}

// styled-components 부분

export const ModalWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: ${(props) => (props.visible ? "block" : "none")};
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
  cursor: pointer;
`;

export const ModalContainer = styled.div`
  display: ${(props) => (props.visible ? "block" : "none")};
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 10px;
  /* width: 700px;
  height: 600px; */
  padding: 20px 0;
  z-index: 100;
  /* cursor: default; */
`;

이전에는 위의 코드처럼 css의 display 속성을 이용하여 모달을 보여줄지 말지를 결정했었다. 여태까지는 저 상태로 잘 사용하고있었지만 이번에 프로젝트를 진행하면서 문제점을 발견했다

문제점

위와 같은 여러개의 게시물의 상세페이지를 모달로 보여주는 과정에서 앞선 모달 컴포넌트를 사용하면 상세 페이지의 상태값들이 초기화 되지고 않을 뿐더러 모달 컴포넌트가 화면에 나타나지 않더라도 작동하는 문제가 발생했다.

해결한 방법

처음에는 useEffect를 이용해 모달을 열고 닫는 경우에 상태값을 처리하려는 시도를 했으나 생각을 바꿔서 모달을 사용하지 않느 경우에는 렌더링을 시키지 않기로 했다.

const InfiniteScroll = () => {

  const [modalToggel, setModlaToggle] = useState({
    open: false,
    loading: false,
    data: {},
  });

  return (
    <>
      {modalToggel.open && (
        <Modal modalToggel={modalToggel} setModlaToggle={setModlaToggle}>
          <Detail item={modalToggel.data} />
        </Modal>
      )}
    </>
  );
};

기존의 모달과 바뀐 부분은 기존에는 모달 온/오프를 관리하는 상태값을 CSS에 접근시켰지만 이제는 해당 상태값을 통해 조건부 렌더링을 진행했다.
이렇게 하면 원하는대로 모달을 사용할 때만 렌더링을 시킬 수 있었다.

이번 문제 해결을 통해 리액트의 라이프 사이클에 대해 다시 한번 생각하게 되었다.