모달창 생성

최종 모습

모달창 코드

function Modal({ setmodal }) {
  const close_modal = (e) => {
    e.preventDefault()
    if (e.target.className === 'modal') {
      setmodal(false)
    }
  }
  return (
    <div className='modal' onClick={(e) => close_modal(e)} value={true}>
      <div >
        <div className='modal_div'>
          <div className='modal_title'>
            제목입니다.
          </div>
        </div>
      </div>
    </div>
  )
}

모달을 함수로 선언해서 만들었다
모달은 css로 거의 처리를 했는데
modal.scss

.modal{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    .modal_div{
        background-color: white;
        height: 90vh;
        width: 90vw;
        display: flex;
        justify-content: center;
        .modal_title{
            font-size: 3vh;
            height: 10%;
            width: 100%;
        }
    }
}

position을 fixed 그리고 background를 흐리게 만들었다.
그리고 modal_div 의 가로 , 세로 를 설정해서 배경색을 하얀색으로 만들어줬다.

문제점

화면에 보여지고 배경을 눌렀을경우 꺼지게 할려고했는데
modal_div 위에 div를 눌렀을경우에는 setmodal(false)
modal_div를 눌렀을경우는 setmodal(true)를 실행해서
밖에를 눌렀을경우에는 모달이 꺼지고 안에를 눌렀을 경우에는 켜지게 했었는데
이게 안에를 눌러도 두개 다 실행이 되어서 모달창이 꺼졌었다.
그래서 여러가지 방법을 찾다가
e.target.className를 사용해서
className이 'modal' 일경우에만 false를 실행하도록 했다.
그결과 배경을 눌러도 잘 꺼졌다...
해결!🔥🔥🔥

후기

원래 라이브러리만 썼는데 라이브러리를 쓰니까 내 마음대로 설정하기가 어려워서 직접 만들게 되었다.
이제 모달창 만들때 편하게 할 수 있을듯??!