[React] 모달창 만들기

목표

useState를 사용하여 지도컴포넌트에서 매장정보 더보기 버튼을 클릭시 스르륵 나타나는 모달창을구현 하고자 한다.

UseState 상태관리 함수 생성

• 모달상태는 false로 지정하여 닫혀있게 둔다.
• 더보기버튼을 클릭시 모달창이열리고 다시 한번 누를때 모달창이 닫히도록
  상태반전 !을 이용한 함수를 생성한다.
• 모달창 내부에서 x (닫기버튼) 클릭시 모달창이 닫히는 함수도 만든다.

    const [isOpen, setIsOpen] = useState(false);

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

    const closeModal = () => {
        setIsOpen(false);
    };
    

더보기버튼 함수 적용

```
<button onClick={openModal}>
       <IoIosArrowForward />
</button>

```

모달내부 함수 적용

• 모달내부 함수를 따로 <컴포넌트 />만들어 지정한다.
• 모달내부의 닫기버튼 함수는 자식 <컴포넌트/>props으로 전달한다.

{isOpen && <Modal closeModal={closeModal} />}

• 부모 컴포넌트에서 전달받은 props(closeModal)을 받아오고, 닫기버튼에 함수를 적용하면 끝!