[React] 토글방식을 활용한 modal 만들기

프론트에서 modal은 정말 많이 쓰인다고 생각한다. 언제 쓰이는지를 생각해보면 보통 어떤 버튼을 클릭했을 때 modal이 생성된다.
오늘은 내가 구현한 방식을 소개하려 한다.

1. Boolean state

• useState를 불린값으로 저장한다.

const [toggle, setToggle] = useState(false);

useState 기본값을 true로 설정한다.

2. modal 컴포넌트 생성

function Modal() {
  return <div> 모달입니다. </div>;
}

export default Modal;

3. 부모 컴포넌트

• 부모 컴포넌트에 버튼태그에서 onClick 이벤트를 활용한다.
  이벤트가 일어날 때 실행되는건 true로 저장된 toggle state를 false로 바꿔주는 setToggle(false)
  즉, 버튼을 누르면 toggle === false 가 된다.

import Modal from "./Modal"

function Parent(){
  return(
    <>
      <button 
      onClick={() => setToggle(true)}>
      모달열기
      </button>
      {toggle === true && <Modal/>}
    </>
  )
}

• modal이 열리긴 열린다. 그러나 닫으려면 toggle을 false로 바꿔야 하는데 그러려면 버튼을 한개를 더 만들어서 setToggle(false)하지말고!

not 연산자

import Modal from "./Modal"

function Parent(){
  return(
    <>
      <button 
      onClick={() => setToggle(!toggle)}>
      모달열기
      </button>
      {toggle === true && <Modal/>}
    </>
  )
}

• 이런식으로 not 연산자를 활용해 동적으로 값을 바꿔줄 수 있다.

비슷한 방식으로 모달 바깥쪽을 클릭했을 때 모달이 닫히도록 하는 방법을 고민하고 있다.