React Transition Modal 적용

 

CSSTransition을 사용하면 팝업에서 Transition 효과를 적용 할수 있습니다.

 

https://reactcommunity.org/react-transition-group/transition

React Transition Group

해당 사이트에 자세한 설명 및 속성에 대한 안내가 나와있습니다.

 

---

1. 먼저 팝업을 <CSSTransition> 으로 감싸줍니다

 <CSSTransition>
      <PageContainer ref={nodeRef}>
        <TitleContainer backgroundColor="#0064de">
          <BackBtn onClick={() => setShow(false)} />
          <Title title="팝업 Todo" color="black">
            팝업 Todo
          </Title>
        </TitleContainer>
        <PageContent paddingTop={20}>
          <ListStyled>
            <li>할일1</li>
            <li>할일2</li>
          </ListStyled>
        </PageContent>
      </PageContainer>
    </CSSTransition>

 

 

2. 기타 속성을 설정합니다.

 <CSSTransition
      appear
      in={isShow}
      nodeRef={nodeRef}
      unmountOnExit
      mountOnEnter
      classNames={'popup-right'}
      timeout={300}
      onExited={onClose}
    >

 

• appear : true 설정하여 Tranisiton을 활성화
• in
  • true : Transition enter
  • false : Transition exit
• nodeRef : Transition 대상을 지정합니다.
• unmountOnExit, mountOnEnter : mount 또는 unmount 할지 결정합니다.
• classNames : Transition CSS Class
• timeout : Transition 걸리는 시간
• onExited : Transition이 종료되고 호출
  • onExited를 Props으로 전달함으로써 부모에서 제어합니다.

 

3. Transition CSS 설정

.popup-right-enter, .popup-right-appear {
  transform: translateX(100%);
}
.popup-right-enter-active, .popup-right-appear-active{
  transform: translateX(0%);
  transition: transform 300ms ease-out;
}
.popup-right-exit {
  transform: translateX(0%);
}
.popup-right-exit-active{
  transform: translateX(100%);
  transition: transform 300ms ease-out;
}

 

 

---

 

최종 Code - Typescript로 작성되었습니다.

 

팝업 컴포넌트

export default function PopupTodo({ onClose }: { onClose: () => void }) {
  const [isShow, setShow] = useState(true);
  const nodeRef = useRef(null);

  return (
    <CSSTransition
      appear
      in={isShow}
      nodeRef={nodeRef}
      unmountOnExit
      mountOnEnter
      onExited={onClose}
      classNames={'popup-right'}
      timeout={300}
    >
      <PageContainer ref={nodeRef}>
        <TitleContainer backgroundColor="#0064de">
          <BackBtn onClick={() => setShow(false)} />
          <Title title="팝업 Todo" color="black">
            팝업 Todo
          </Title>
        </TitleContainer>
        <PageContent paddingTop={20}>
          <ListStyled>
            <li>할일1</li>
            <li>할일2</li>
          </ListStyled>
        </PageContent>
      </PageContainer>
    </CSSTransition>
  );
}

 

부모 Component에서 정의

{isShowPopup && <PopupTodo onClose={() => setShowPopup(false)} />}