react 모달 구현하기

현재 구현 가능

• 한 개의 모달
  • state로 열고 닫음
  • 최상위로 올리는 작업을 CSS로 해결..

앞으로 해결해 나가야 할 숙제

• 여러개의 모달을 구현하지 못함 (코드 반복)
• 공용 컴포넌트로써 redux에 객체 형태로 이름과 상태를 관리하여 열고 닫아야 될 것 같음
• react portal을 이용하여 최상위로 끌어올려야 할 듯

현재 모달 code

Header 컴포넌트

// Header 컴포넌트의 코드 일부분
import { useState } from "react";
const Header = () => {
// ...some logic
  const signInOpenModal = () => SetSignInOpen(true);
  const [signInOpen, SetSignInOpen] = useState(false);
return (
  <header>
// ...some code
    {uid === null ? (
      <Button onClick={signInOpenModal}>로그인<Button>
     ) : (
       <Button onClick={logOut}>로그아웃</Button>
    )}
    {signInOpen && <SignInModal SetIsOpen={SetSignInOpen} />}
// ...some code
  </header>
  );
};
export default Header;

SingInModal 컴포넌트

import { styled } from "styled-components";
const SignInModal = ({ SetIsOpen }) => {
  const closeModal = () => SetIsOpen(false);
  //...some logic
  return (
    <Outer>
      <Inner>
        //...some code
        <button onClick={closeModal}>닫기</button>
      </Inner>
    </Outer>
  )
}
export default SignInModal;
const Outer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.3);
`;
const Inner = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px;
  z-index: 6;
  background-color: #ffffff;
  border-radius: 70px;
`;

아쉬운 점

프로젝트에서 로그인, 회원가입, 회원정보 수정, 글 작성, 글 수정을 모달로 구현하였는데


모달의 열고 닫히는 상태를 전역으로 관리 하였을 때 해답을 찾지못해
여러개의 모달이 전부 열리고 닫히는 문제와
최상위로 빼주지 못하여 header나 nav에 묻히는걸 z-index로 해결하였습니다.


앞으로는 Outer 와 Inner만 유지하여 공용 컴포넌트로써 기능을 하기위해 열고 닫히는 상태를 전역상태관리로 빼주고 portal을 공부하여 모달을 업그레이드 해야겠다.