React Modal createPotal 리액트 모달창 띄우기

리액트를 통해 새로운 프로젝트를 만드는 중인데 로그인 기능을 구현하고 싶다.

 

우선 로그인 버튼을 누르면 로그인 페이지로 이동하지 말고 모달창을 열어서 로그인을 하고 싶은데

모달을 사용하려면 어떡해야 하나?

 

React는 최상위 컨테이너인 <div id="root></div>에 모든 컴포넌트가 렌더링된다.(CRA기준)

 

Modal은 어떤 컴포넌트에서 불러와도 최상위에 보여져야 하기 때문에 컴포넌트 트리를 벗어나는게 깔끔하다고 한다.

이럴 땐 ReactDOM.createPortal(child, container)을 사용하면 된다.

우선 root컨테이너 밑에 새로운 컨테이너를 추가한다.

 

 

그리고 나서 불러올 Modal 컴포넌트를 만든다.

import React, { Fragment } from "react";
import { createPortal } from "react-dom";

...

const LoginModal = () => {
  const ID = document.getElementById("modal");

  return (
    <Fragment>
      {createPortal(<BackdropStyle />, ID)}
      {createPortal(<ModalOverayStyle>로그인 창</ModalOverayStyle>, ID)}
    </Fragment>
  );
};

export default LoginModal;

 

 

이제 클릭 이벤트를 통해 모달 창을 불러오자

import React, { useState } from "react";
import LoginModal from "./LoginModal";

const Login = () => {

  const [isLogin, setIsLogin] = useState(false);
  const [onLoginModal, setOnLoginModal] = useState(false);

  const onModalHandler = () => {
    setOnLoginModal(true);
  };

  const onLogoutHandler = () => {
    setIsLogin(false);
  };

  const Login = <button onClick={onModalHandler}>로그인</button>;
  const signOut = <button onClick={onLogoutHandler}>로그아웃</button>;

  return (
    <div>
      {!isLogin ? Login : signOut}
      {onLoginModal ? <LoginModal /> : null}
    </div>
  );
};

export default Login;

onLoginModal state의 값이 true가 되면 Modal 창이 나타나게 된다.