[React.js] 리액트에서 화면전환 애니메이션 ( react-transition-group )

 

리액트는 자바스크립트 프론트엔드 프레임워크로 정말 편리한(?) 프레임워크라고 생각합니다.

아직 저도 깊게 들여다보진 않았지만, 정말 편하다고 생각하여 자주 사용하고 있습니다.

 

아직 공부를 시작한지 얼마 되지 않아 모르는 것이 정말 많아 프로젝트를 진행하며 공부를 해야 할 것 같습니다.

 

---

리액트를 하다가 페이지를 넘겼을 때 애니메이션을 보여주고 싶었습니다.

Fade in / Fade out 이 아닌 Slide 식으로 보여주고 싶었습니다.

 

이 방법을 적용하기 위하여 정말 많은 시도를 하였습니다.

 

먼저 react-transition-group 에 대하여 공부를 하였습니다.

 

npm install --save react-transition-group

 

먼저, react-transition-group 를 설치합니다.

이 이후 아래 사이트에서 공부를 하였습니다.

 

reactcommunity.org/react-transition-group/with-react-router/

React Transition Group

 

제가 원하는 slide를 적용하기 위해서는 어떤 걸 해야 하나 정말 많은 고민을 하였습니다.

 

먼저, 예제를 살펴보았습니다.

 

위 링크를 들어가면 바로 보이는 코드를 분석하기로 하였습니다.

제가 필요한 건 CSSTransition 이 부분.

<Container className="container">
          {routes.map(({ path, Component }) => (
            <Route key={path} exact path={path}>
              {({ match }) => (
                <CSSTransition
                  in={match != null}
                  timeout={300}
                  classNames="page"
                  unmountOnExit
                >
                  <div className="page">
                    <Component />
                  </div>
                </CSSTransition>
              )}
            </Route>
          ))}
        </Container>

 

예제코드에서 보니 이런 식으로 정리가 되어있더군요

이렇게 하게 된다면 페이지 전환 시 다른 페이지가 위에 덮어지는? 방식이었습니다.

제가 원하던 거랑은 많이 달랐지만, 한 가지 의심을 가졌습니다.

 

바로 classNames에 따라 내용이 달라질 거 같다 라는 생각이었습니다.

그래서 저는 이 내용을 토대로 구글에 엄청난 폭풍 검색을 하였습니다.

그러게 알게 된 코드가 바로 아래 코드입니다.

<Router>
	<Route render={({location}) => (
		<TransitionGroup>
			<CSSTransition
				key={location.key}
				timeout={500}
				classNames="fade"
			>
                <Switch location={location}>
                	<Route></Route>
                </Switch>
            </CSSTransition>
        </TransitionGroup>

    )} />

</Router>

• TransitionGroup
• CSSTransition
• Switch

이 두 가지를 같이 써야 한다는 사실을 알아냈습니다.

솔직히 왜 같이 써야 하는지는 정말 모르겠습니다... (아시는 분 댓글 부탁드립니다.)

 

이 두 가지를 사용하는데 CSSTransition 에는 옵션을 달아주어야 합니다.

자세한 사항은 위에 링크를 통하여 확인해주시기 바랍니다.

 

저는 여기에 옵션을 몇 가지 추가하기로 하였습니다.

 

• mountOnEnter
• unmountOnExit

default: false

 

이 두 가지는 다음 페이지를 불러올 때 마운트와 원마운트 어떻게 할 건지 선택하는 옵션입니다.

위 두 가지 옵션의 디폴트 값은 false입니다.

 

이 옵션에 대해서 정확히 설명을 해드리고 싶지만, 제가 영어를 못해서 정확한 설명은 어렵습니다..

위 이미지를 보시고 따로 생각해주시면 감사하겠습니다..!

 

그렇게 수정된 코드는

<Router>
	<Route render={({location}) => (
		<TransitionGroup>
			<CSSTransition
				key={location.key}
				timeout={500}
				classNames="slide"
				mountOnEnter={true}
				unmountOnExit={true}
			>
                <Switch location={location}>
                	<Route></Route>
                </Switch>
            </CSSTransition>
        </TransitionGroup>

    )} />

</Router>

옵션을 붙이고 className을 수정해 주었습니다.

그리고, key값을 입력을 해주어야 하는데 아무래도 해당 키값이 있어야 현재 페이지와 다음 페이지의 키값을 넣어주고 그다음에 이벤트를 발생시키기 때문에 key값은 필수라고 볼 수 있습니다.

 

 

그런데 이렇게만 한다고 끝나는 것이 아니었습니다.

.pageSlider-enter {
  transform: translate3d(100%, 0, 0);
}

.pageSlider-enter.pageSlider-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all 600ms;
}
.pageSlider-exit {
  transform: translate3d(0, 0, 0);
}

.pageSlider-exit.pageSlider-exit-active {
  transform: translate3d(-100%, 0, 0);
  transition: all 600ms;
}

위와 같은 CSS 도 적용을 해 주어야 정상적인 작동이 가능했습니다.

아무래도 애니메이션을 적용하는 건  CSS를 수정하면서 해야 하나 봅니다..

 

앞으로 여러 가지 페이지 전환 애니메이션을 적용해봐야겠네요