[React] useState로 공통모달창만들기

📌목표

1. useState를 이용하여 modalcomponent 와 modal-content component (SearchModal, CartModal ... )의 상태를 관리한다.
2. children을 사용하여 modal componet -> modal-content 으로 레이아웃을 전달함, 컨텐츠내용만 분리하여 관리 할수 있도록 한다.
3. 최상위 component인 App.js에 modal의 상태관리, 이벤트함수를 등록해두고 언제든지 modal기능을 사용하고싶은 layout이 있다면 props으로 간단하게 전달하여 사용 할 수있도록 구현함

폴더 구조

component
---assets
------styles
------img
---layout
---routes
---utils
Modal
---Modal.js //공통컴포넌트
---SearchModal.js //파생컴포넌트
---CartAddModal.js //파생컴포넌트

styled-component 라이브러리설치

-기본적인 모달 레이아웃 스타일링은 추후 포스팅할 예정

npm install styled-componet

Modal 컴포넌트 생성

• modal을 공통레이아웃으로 쓰기위해 열기,닫기,제목,그리고
  modal-content가 들어갈 children을 props으로 전달한다.

Modal 상태관리 등록

• modal component 의 open, close를 관리하는 상태함수와
  modal-content의 title을 관리하는 상태함수
  modal-content의 내용을 업데이트하는 상태함수를 생성하여
  최상위 부모 componet인 App.js에 등록해둔다.

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [modalTitle, setModalTitle] = useState('');
    const [modalContent, setModalContent] = useState(null);

Modal 이벤트 등록

• modal이 열렸을때 / 닫혔을때 이벤트를 동록한다.
  열렸을때 : 제목과 content의 내용의 업데이트를 설정
  닫혔을때 : 제목, content의 내용이 비어져 있게 설정

      const openModal = (title, content) => {
        setModalTitle(title);
        setModalContent(content);
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setModalTitle('');
        setModalContent(null);
        setIsModalOpen(false);
    };
    
  <div>
        <Modal
             isOpen={isModalOpen}
             onClose={closeModal}
             title={modalTitle}
                >
              {modalContent}
         </Modal>
  </div>
// + 추후 수정하기 
   (모달창의 z-index 적용 X 임시방편으로 최하단에 코드 추가하여 상단에 위치하게함)

Modal props 내보내기

• 최상위 부모 컴포넌트인 App.js에서 header(사용하고자하는 layout) 에서 modal기능을 사용하기 위해
  모달의 기능을 openmodal={openModal}의형태로 props를 전달하였다.

• modal 내부의 상태값과 x버튼 클릭시 닫히는 closeModal이벤트 함수 및 제목상태함수도 props도 같이 전달한다.

 <Header openModal={openModal} />
                 //props 전달 
     <Modal
        isOpen={isModalOpen}
        onClose={closeModal}
        title={modalTitle}
                >
      {modalContent}
    </Modal>

Modal props 받아오기

• header (사용하고자하는 layout) component에서 전달받은openmodal props를 받아온다.

• modal의 기능이 사용될 menu에 (button, Link, 등등 ... ) 에
  onclick 이벤트를 걸어 모달이열리는 함수 openmodal을 적용시켜준다.

• 이 때, {modalcontent}에 넣을 동적컨텐츠 들은 <component />로 작성하여 openModal함수 속에 넣어주면된다!

• 동적으로 들어갈 제목도 openmodal 함수 속 ' '안에 입력하면 끝!

export default function Header({ openModal }) {
							 //props 받아오기
 <Link onClick={() => openModal('검색tite입니다.', <SearchModal />)}>검색</Link>

}

✔️구현완료