[React] Modal Component

Modal

기존 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것

• 팝업
  현재 페이지에 또 다른 페이지를 띄우는 것.
  외부설정으로 제어할 수 있음(강제로 창을 막는 등)
• 모달
  새로운/다른 페이지가 아니라 레이어를 보여주는 것.
  페이지를 이동하면 사라짐.
  외부설정의 옵션에 영향을 받지 않음.

요구조건

• 모달창 외부를 클릭했을 때에도 창이 닫히도록 해야 함.

의사코드

1. 모달창의 표시 유무를 확인하는 boolean값을 다룰 useState 생성
2. 모달창을 표시할 버튼 생성(useState의 상태 업데이트)
3. state의 true/false 조건에 따라 표시 유무가 달라지는 div 생성
4. div 안에 모달창이 보일 때 함께 보일 배경 박스와 모달 창 추가
5. 배경 박스에 true값을 false값으로 바꾸는 클릭 이벤트 추가

코드

export const Modal = () => {
  // 모달창을 보여주는 true/false 값
  const [isOpen, setIsOpen] = useState(false);

  const openModalHandler = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <div>
        <button
          onClick={openModalHandler}
        >
          Open!
        </button>
        {isOpen && (
          <div onClick={openModalHandler}> // 모달창의 배경
            <div onClick={(e) => e.stopPropagation()}> // 모달창
              <div>Hello?</div>
              <button onClick={openModalHandler}>Close</button>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

기억할 것

position:fixed

해당 요소를 항상 고정된 위치에 배치
fixed 속성값의 배치 기준은 뷰포트가 된다.
top, left, bottom, right 속성은 각 브라우저의 상단, 좌측, 하단, 우측으로부터 해당 요소가 얼마나 떨어져있는지를 결정

event.stopPropagation()

현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지
이벤트의 기본 동작을 막는 것은 아님( !== preventDefault() )
해당 모달 컴포넌트에서는 모달창의 외부를 클릭했을 때 발생하는 openModalHandler 함수가 모달창 내부에서는 작동하지 않도록 하기 위해 사용되었다.

• 해당 기능을 사용하지 않고 배경 부분과 모달 컴포넌트를 분리해서 작성하는 방법도 있음.