[React] url params 변경시 애니메이션 넣기

 

오늘 만들어볼 간단한 애니메이션!

 

그냥 클릭할 때 애니메이션 넘기면서 조작하는 거야 아주아주 쉽지만,

url params를 바꿀 때 애니메이션과 함께 넘어가는 건 한 번 생각해볼만 하다.

 

간혹 이런 사이트들이 있다.

https://pvoznyuk.github.io/react-update-url-on-scroll/

react-update-url-on-scroll

 

스크롤을 내릴 때 url params가 바뀌는 웹사이트들이 종종 있다.

회사의 소개 페이지나 포트폴리오 관련 페이지들이 종종 그러는데, react-router v5 시절에는 hashRouter를 이용해서 간단하게 구현이 가능했지만.. 이제 없어져버렸다.

 

router 설정도 결국엔 body 태그 하단의 JSXElement를 모두 바꿔주는 역할이기 때문에,

Container 안에서 Componenet를 조작해주면 이런 형태로 보여주는 게 가능하다.

 

말보단 코드로 보여주는게 이해가 편할 것이다.

 

1. React-Router-Dom Nesting

App.tsx

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={"/"} element={<WallPaper />}>
          <Route path={"/"} element={<WallPaper />} />
          <Route path={"/docs"} element={<WallPaper />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

이전에 sleact 클론 코딩 때 이 nesting을 한 번 다루긴 했었는데,

slack의 좌측과 상단 네비게이션은 항상 같은데, dm 일때와 채널일 때 큰 화면만 바뀐다.

기본적인 "/" path여도, "/docs" path여도 같은 경로로 들어가게 만들어 줘야한다.

 

2. React Transtion Group

Workspace.tsx

<TransitionGroup className={"transition-wrapper"}>
  <CSSTransition key={location.pathname} timeout={300} classNames={"right"}>
    <Routes location={location}>
      <Route path={"/"} element={<MainFrame />} />
      <Route path={"/docs"} element={<Docs />} />
    </Routes>
  </CSSTransition>
</TransitionGroup>

 

먼저, 원활한 Transition을 위해서 react-transition-group 라이브러리를 설치해준다.

이 라이브러리를 활용하면 트랜지션 시 css handler를 넣어 줄 수 있다.

 

https://www.npmjs.com/package/react-transition-group

react-transition-group

 

npm i react-transition-group

// 타입스크립트를 쓴다면 @types도 같이 받아야한다.
npm i @types/react-transition-group

 

이 라이브러리를 쓰는 목적은 CSSTransition의 classNames 세팅 때문이다.

내가 설정한 "right"라는 텍스트에 대해서 자동으로 activate option들이 붙는다.

 

.right-enter {}

.right-enter-active {}

.right-exit {}

.right-exit-active {}

 

css transition이 일어날 때, 혹은 children이 route로 묶여있어서 변화가 일어날때,

조정이 가능하다.

 

주의할 점은,

 

이전에 마운트 되어있던 컴포넌트는 exit되고,
새로 마운트 되는 컴포넌트는 enter 된다는 점이다.

 

css class를 다음과 같이 채워주면 내가 만들어준 오른쪽으로 이동하는 웹페이지 화면 전환이 완성된다.

.right-enter {
  transform: translateX(100%);
}

.right-enter-active {
  transform: translateX(0);
  transition: transform 0.14s ease-in-out;
}

.right-exit {
  transform: translateX(0);
}

.right-exit-active {
  transform: translateX(-100%);
  transition: transform 0.14s ease-in-out;
}

 

만약 CSS in JS로 스타일링을 해줬다면,

내부의 관계에 따라서 약간 조정을 해줘야할 필요가 있다.

 

가장 겉에 선언한 TransitionGroup에 해당하는 div 태그 하나만 있다.

 

CSSTransition은 아마 Fragment로 묶이고 css 관련된 핸들러에만 영향을 미치는 것 같다.

TransitionGroup에 해당하는 div 태그 하나만 생성되고 나머지 요소는 하위 children으로 형성된다.

 

또, 내 짧은 css 지식으로는 transform 조정과 관련해서

가장 겉에있는 container class의 position이 absolute여야만 한다.

 

여기까지 작업을 해준다면 성공!

이제 navigation을 넘길때에도 애니메이션을 넣을 수 있다!