[항해99 8주차] - 실전 프로젝트 (2) - 리액트 portal로 모달 만들기

 

글 쓰고 기록하는 습관이

점점 사라지고 있는 것 같아 무섭지만

틈틈이 조금씩이라도 써보려고 한다.

 

저번 주차 클론 코딩 때는 

모달 창 띄우는 게 처음이고 

도저히 구글링 해서 새로 공부할 시간이 없어서

모달 창 관리를 개떡같이 했는데

 

프로젝트 규모가 커졌기 때문에

 기능 구현에 급급한 코드는 

지양해야 할 것 같다.

 

 

리액트 portal을 사용하면

모달 라이브러리를 설치하지 않고도

간편하게 모달을 띄울 수 있다!

 

 

 

 

public / index.html 파일에서

id가 root인 div아래에 같은 경로로

id가 modal인 div를 만들어주면

 

root(전역) 안에서 어떤 컴포넌트가 어떻게 렌더링 되던지

전혀 영향을 받지 않는

modal을 만들 수 있다.

 

 

 

 

 ModalContainer.jsx파일을 하나 만들어주자

import React from 'react';
import { createPortal } from 'react-dom';

function ModalContainer({ children }) {
  return createPortal(<>{children}</>, document.getElementById('modal'));
}

export default ModalContainer;

 

위와 같은 코드를 붙여 넣고

 

 

 

const Login = ({ onClose, onSignupButton }) => {



  return (
    <ModalContainer>
      <Overlay>
        <ModalWrap ref={modalRef}>
        모달창입니다!
        </ModalWrap>
      </Overlay>
    </ModalContainer>
  );
};

export default Login;

 

ModalContainer를 import 하여

원하는 모달 컴포넌트를 감싸주면 끝이다.

 

 

 

 

 

function Header() {


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

  const onLoginButton = () => {
    setIsOpen(true);
  };

  return (
    <StHeaderDiv>
      <StDiv>
        <StLogJoin fc='#00A99D' onClick={onLoginButton}>
          LOGIN
        </StLogJoin>
        {isOpen && (
          <Login
            open={isOpen}
            onClose={() => {
              setIsOpen(false);
            }}
          ></Login>
        )}
      </StDiv>
    </StHeaderDiv>
  );
}

 

state로 상태 관리하여

로그인 버튼을 클릭 시 isOpen을 true로 바꿔주면

숨어있던 모달이 뿅 나타난다.

 

다음 포스팅은

모달 밖 영역을 클릭했을 때

모달을 닫는 것과

여러 개의 모달을 효율적으로 관리하는 법을 알아보겠다.

 

물론 언제 포스팅할지는

잘 모르겠다.

 

 

그리고 이 portal을 이용하여 채팅창 관리도 하게 될 것 같은데

그것도 그때가서 글을 쓰겠다!!

 

아자아자 화이팅