React로 팝업창 구현하기

React 에서 팝업창 어떻게 구현할까

React 에서 버튼 누르면 팝업창이 나타나고, 그 팝업창에 있는 Close 버튼으로 해당 팝업창을 닫고 싶습니다.

이 로직을 어떻게 React 에서 구현하면 괜찮을지 GPT 센세를 통해서 정리해봤습니다 ㅎㅎ

코드는 이렇게..

먼저 저는 이용자들의 정보가 배열될 수 있는 컴포넌트를 만들고,

그 아래쪽에 버튼을 넣었습니다. Invite User 라는 버튼을 누르면 팝업창이 나타나고,

여기서 이런저런 요소를 넣고 버튼을 누르면 사용자를 초대할 수 있는 로직을 만드려고 구상하고 있습니다.

이를 위해서 반드시 이 팝업창을 구현하는 로직을 알고 넘어갈 필요가 있을 것 같습니다;;

일단 현재 제 코드입니다.

				
					const Management = () => {
  return (
    <>
      <SideMenu />

      <div className="management-container">
        <div className="page-box">
          <div className="page-title">
            <div className="page-title-span">My Team</div>
          </div>

          <UserTable />

          <button className="invite-button">
            <img src={UserInvite} />
          </button>
        </div>
      </div>
    </>
  );
};

export default Management;

옆에 코드를 실제 화면으로 보면 위와 같습니다.

저기 구석에 있는 파란 버튼이 있죠?

저 버튼 누르면 팝업창 나오게 하는 게 목적입니다!

그럼 한 번 해보죠..

				
					const Management = () => {
  const [InvitePopup, setInvitePopup] = useState(false);

  const handleInviteUser = (event) => {
    setInvitePopup(true);
  };

  const handleCloseInvitePopup = (event) => {
    setInvitePopup(false);
  };
  return (
    <>
      <SideMenu />

      <div className="management-container">
        <div className="page-box">
          <div className="page-title">
            <div className="page-title-span">My Team</div>
          </div>

          <UserTable />

          <button className="invite-button" onClick={handleInviteUser}>
            <img src={UserInvite} />
          </button>
        </div>
      </div>
    </>
  );
};

export default Management;

먼저 상태 변수들을 쭉 만들어야 합니다.

2번 줄부터 10번줄까지의 상태 변수가 무엇을 의미할까요?

우선 기본적으로 팝업창은 나타나거나, 나타나지 않거나 두 가지의 상태를 가집니다.

이를 위해 InvitePopup 이라는 변수에는 기본적으로 false 를 넣습니다.

이것을 true 로 바꿔주는 handle 이 4번줄에..

이것을 false 로 다시 바꿔주기 위한 handle 이 8번줄에 있습니다.

이제 23번줄을 볼까요?

이 버튼은 팝업창을 나타내는 버튼이니까, onClick 에는 InvitePopup 변수를 true 로 바꿔주는 handle 을 넣어줍시다.

				
					const Management = () => {
  const [InvitePopup, setInvitePopup] = useState(false);

  const handleInviteUser = (event) => {
    setInvitePopup(true);
  };

  const handleCloseInvitePopup = (event) => {
    setInvitePopup(false);
  };

  return (
    <>
      <SideMenu />

      <div className="management-container">
        <div className="page-box">
          <div className="page-title">
            <div className="page-title-span">My Team</div>
          </div>

          <UserTable />

          <button className="invite-button" onClick={handleInviteUser}>
            <img src={UserInvite} />
          </button>

          <InvitePopupField show={InvitePopup} onClose={handleCloseInvitePopup}>
            여기에 코드를 추가하면 나타납니다.
          </InvitePopupField>
        </div>
      </div>
    </>
  );
};

export default Management;

위 코드와 설명을 이해했다면, 이제 어떤 구조로 팝업창이 등장할지 대충 유추 가능합니다.

InvitePopup 이라는 변수가 true 냐, false 냐에 따라서 팝업창이 나타나거나 사라지고,

이 변수에 true 를 담을지 false 를 담을지 타나내는 핸들러를 만들었습니다.

버튼 아래 28번 코드를 보면

InvitePopupField 라는 컴포넌트가 보일 겁니다.

이 컴포넌트로 우리는 show 라는 인자에 true 또는 false 를 넣게 되고,

onColose 라는 인자에는 InvitePopup 을 false 로 변경하는 핸들러를 넣어줍니다.

이 컴포넌트에 전달한 Childeren 부분은 우리가 작성하고 싶은 코드들이 될 겁니다.

이 코드에서는 단순한 글귀만이 Children 으로 전달이 될 것 같습니다.

그럼 이제 show, onColose, Children 이 활용된 InvitePopupField 라는 컴포넌트를 만들면 끝입니다.

				
					const InvitePopupField = ({ show, children, onClose }) => {
  if (!show) {
    return null;
  }

  return (
    <div className="popup">
      <div className="popup-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

왼쪽과 같은 컴포넌트를 만들었습니다.

show 가 flase 일 때는 null 이 나타나게 함으로써 필드 자체가 나타나지 않게끔 합니다.

true 로 전달이 되었을 때는 아래쪽에 있는 요소들이 쭈욱 나타날 겁니다.

여기서 Close 버튼을 누르면? show 인자라 false 로 변하는 것과 매한가지가 되어 팝업창이 닫힙니다.

마치며..

위 코드를 통해 만들어진 팝업창을 나타내고 사라지게 하는 버튼이 어떻게 작동을 하는지 영상을 첨부하겠습니다.

이제 어떤 원리로 팝업창이 나타나고 사라지는지 깨우친 것 같습니다.

로직은 간단한 것 같습니다.^^