[리액트] 모달창 띄우기

✅ 구현 목표
1. 모달창 띄우기
2. 배경 어둡게 하기
3. 버튼, 배경 눌러서 창 닫기

---

모달창 띄우기

버튼을 누르면 onSetIsFilterVisible함수가 실행되며 모달창이 화면에 나온다.

onSetIsFilterVisible 함수가 실행되면 isFilterVisible의 현재 값의 반대값으로 set한다.

//Nav.js
const [isFilterVisible, setIsFilterVisible] = useState(false);
const onSetIsFilterVisible = () => {
    setIsFilterVisible(prev => !prev);
  };

isFilterVisible가 true가 되면 Filter, ModalBlackOut컴포넌트가 화면에 나오고, false면 사라진다.

Filter 컴포넌트는 필터 모달창, ModalBlackOut 컴포넌트는 어두운 배경이다.

//Nav.js
{isFilterVisible && (
  <Filter onSetIsFilterVisible={onSetIsFilterVisible} />
)}
{isFilterVisible && (
  <ModalBlackOut
    type="filter"
    onSetIsFilterVisible={onSetIsFilterVisible}
  />
)}

props로 모달창 닫고 여는 함수를 보낸다. 그래야 필터 모달창에서 X버튼으로 모달창을 닫을 수 있다.

또 어두운 배경을 눌러 닫기 위해서도 필요하다. ModalBlackOut 컴포넌트는 type도 props로 전달한다.

---

어두운 배경

//ModalBlackOut.js
const ModalBlackOutBox = ({
  onSetIsLoginVisible,
  onSetSingupVisible,
  onSetIsFilterVisible,
  type,
}) => {
  const authType = {
    login: onSetIsLoginVisible,
    signup: onSetSingupVisible,
    filter: onSetIsFilterVisible,
  };

  return <ModalBlackOutBox onClick={authType[type]} />;
};

export default ModalBlackOut;

어두운 배경은 대부분의 모달창에서 사용된다. 그래서 굳이 모달창 마다 배경 컴포넌트를 만드는 것은 비효율적이기 때문에 하나의 컴포넌트에서 관리해야 한다. 객체매핑을 이용하면 쉽게 하나의 컴포넌트에서 관리할 수 있다.

1. 부모 컴포넌트에서 전달 받을 type을 미리 객체 형태로 만들고 vlaue값으로 할당한다.
2. 컴포넌트에 type=””을 전달해서 받은 type에 따라서 key값에 맞는 함수를 실행 시킨다.

const ModalBlackOut = styled.div`
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.65);
`;

1. 스크롤 시에도 따라오게 하기 위해 position은 fixed로 한다.
2. left,top을 50%로 해서 가운데로 오게한다. 하지만 이렇게만 하면 우측하단 모서리가 가운데로 온다. 그래서 사각형의 중심이 가운데로 오게 해야한다. 그러기 위해선 transform: translate(-50%, -50%)를 줘서 정 가운데 위치시킨다.
3. z-index로 기존 화면위에 띄운다.

마치며

웹사이트에서 많이 사용되는 모달창에 대해서 알아봤다. 프로젝트를 진행해보니 모달창을 상당히 많이 사용하였는데 앞으로 유용하게 자주 사용할 것 같다.