TIL-23.06.09

 

 

문제점

portal을 이용해서 다른 DOM트리에 구현한 모달창 내부 버튼을 클릭시 해당하는 또 다른 모달창을 렌더링해야하는 기능을 구현해야했다.

즉, 간단히 말하면 이중모달 기능을 구현해야했다.

처음에는 생각나는대로 기존 모달컴포넌트 내부에서 또다른 포탈을 불러와 모달전용으로 사용하는 DOM root에 렌더링해주었는데, 기존 모달창과 새로운 모달창이 동시에  렌더링되는 현상이 발생했다. 기존의 모달창을 닫고, 새로운 모달창을 새롭게 여는 방법이 필요했다.

기존 모달컴포넌트 내부에서 해당 모달컴포넌트를 닫게끔하는 방법이 없었다. 곰곰히 고민하다 생각을 넓혀보니 렌더링된 기존의 모달컴포넌트에서 새로운 모달컴포넌트를 렌더링하는게 아니라, 기존의 모달컴포넌트를 렌더링해주는 부모컴포넌트에서 컨트롤할수있겠다는 생각이 들어 코드를 작성했다.

 

 

 

 

시도한점

const handleUserInfo = newValue => {
    if (newValue === true) {
      setUserInfoModal(false);
      setNickNameModal(false);
      setPasswordModal(false);
      setUnregisterModal(false);
    } else if (newValue === 'nickname') {
      setNickNameModal(true);
      setUserInfoModal(false);
    } else if (newValue === 'password') {
      setUserInfoModal(false);
      setPasswordModal(true);
    } else if (newValue === 'unregister') {
      setUserInfoModal(false);
      setUnregisterModal(true);
    }
  };
  
  
{userinfoModal && (
            <ModalPortal> 
               <UserInfoModal onAccess={handleUserInfo} />
            </ModalPortal>
          )}
          
{nicknameModal && (
            <ModalPortal>
              <MypageNicknameModal onAccess={handleUserInfo} />
            </ModalPortal>
          )}
          
{passwordModal && (
            <ModalPortal>
              <MypagePwdModal onAccess={handleUserInfo} />
            </ModalPortal>
          )}
          
{unregisterModal && (
            <ModalPortal>
              <DelModal onAccess={handleUserInfo} type="unregister" />
            </ModalPortal>
          )}

 

부모컴포넌트에서 해당 모달컴포넌트에 props를 내려주고, 해당 모달컴포넌트가 사라지는기능을 구현하기위해 자식컴포넌트에서 부모컴포넌트로 필요한 값을 올렸고, 올린 값을 이용해 해당 모달컴포넌트를 사라지게하는 기능을 구현했다.

즉, 부모컴포넌트 한곳에서 전체 모달컴포넌트를 통제하며 마치 이중 모달과 같은 기능을 구현한것

 

 

 

알게된점

이중모달구현은 언제 한번 해보았나? 라는 생각을 해보니... 이번에 처음구현해보는것이였다... 정상적으로 오류없이 잘 구현되게끔 작성했으니 문제는 없다.