리액트에서 모달창 띄우기

코드를 요약하지 않고 정석적인 방법을 적음

 

useState를 이용해 true, false 값으로 모달창 여닫는 기능 만들어 줌

// 부모 컴포넌트

const Todo = (props) => {
  const [modalIsOpen, setMdalIsOpen] = useState(false)

  const deleteHandler = () => {
    setMdalIsOpen(true)
  }
  const closeModalHandler = () => {
    setMdalIsOpen(false)
  }
.
.
.
      </div>
      {modalIsOpen && <Modal onCancel={closeModalHandler} onConfirm={closeModalHandler} />}
      {modalIsOpen && <Backdrop onCancel={closeModalHandler} />}
    </div>
  )
}

export default Todo

 

자식 컴포넌트들

import React from 'react'

const Modal = (props) => {
  const cancelHandler = () => {
    props.onCancel()
  }
  const confirmHandler = () => {
    props.onConfirm()
  }


  return (
    <div className='modal'>
      <p>Are you sure?</p>
      <button className='btn btn--alt' onClick={cancelHandler}>Cancel</button>
      <button className='btn' onClick={confirmHandler}>Confirm</button>
    </div>
  )
}

export default Modal

import React from 'react'

const Backdrop = (props) => {
  return <div className='backdrop' onClick={props.onCancel} />
}

export default Backdrop

핵심은 '모달창처럼' 보이게 만들어주는 것이다.

Modal이라는 컴포넌트의 div태그에 z축의 위치를 지정해주는 z-index와 position: fixed 클래스를 주어서 모달창처럼 보이도록 하고,

모달창이 떠 있는 동안 Backdrop이라는 컴포넌트가 배경색을 어둡게 만들면 진자 모달창이 뜬 것처럼 보이는 효과가 나온다.

그리고 나머지 기능은 props를 통해 구현하면 된다.