TodoList 만들기(2)

 

 

화면전환 효과

페이지 넘길 때 화면전환 효과를 주고 싶었다. 화면은 React Router로 path를 변경하는 것이어서 일반적인 방법으로는 애니메이션을 줄 수가 없었다. 그래서 찾아보니 TransitionGroup 이라는 라이브러리를 찾았다. 

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

React Transition Group

원리는 화면 전환을 할 때 이전화면을 기억하면서 다음화면을 불러오는 것이다.

공식문서를 참고하면서 화면 전환 효과를 적용해보기로 했다.

 

근데 문서를 읽다보니 React Router 에 transition을 적용할 때 Switch(지금은 Routes)를 적용하면 안된다고 되어있어서 React Router v6 의 기능인 createBrowserRouter를 사용하기로 했다.

일단은 기존에 작성되어 있던 Routes를 지우고, 여러 블로그와 문서를 참고하여 createBrowserRouter를 사용하여 router 기능을 새로 작성했다.

 

기존 router와는 약간 다르게 배열로 각각의 path를 만들고 createBrowserRouter로 페이지를 보여줄 컴포넌트를 지정한다.

* 여기서 nodeRef는 TransitionGroup에서 사용할 요소 참조값이다. (useRef로는 안되던데 왜 안되는지는 찾아봐야 할 것 같다.)

 

작성한 Router를 적용시키기 위해 index.tsx에 RouterProvider를 지정해주고,

 

App.tsx에 Router를 적용시켜주면 된다. 그런데 여기서 TransitionGroup을 적용시켜서 작성한다.

(Header와 NavBar 컴포넌트는 항상 페이지에 떠있게 될 컴포넌트들이다.)

TransitionGroup의 공식문서를 참고해서 작성했는데, 일단 내가 이해한 것만 설명해보면,

useLocation으로 현재 url의 정보를 받고, 현재경로의 nodeRef를 받아와서 TransitionGroup의 도움을 받아 렌더링한다. (SwitchTransition과 CSSTransition 컴포넌트는 TransitionGroup의 컴포넌트다.)

 

CSSTransition의 classNames가 fade로 되어있는데, 이렇게 하면 화면이 전환될 때 fade-enter, fade-exit로 되어있는 css 의 효과를 받는다.

일단은 x축으로만 이동하고, 투명도가 조절되도록 해놓았다.

잘 작동하는것 같다.

 

제목 효과

다음으로는 헤더의 제목에 있는 텍스트에 Typeit 이라는 library를 사용하여 페이지에 들어올 때 타이핑이 되는것처럼 효과를 줘봤다.

https://www.typeitjs.com/

TypeIt

적용 자체는 간단했는데, Typeit에 텍스트를 state로 주니 리렌더링이 되지 않는 문제가 있었다. (아마도 Typeit에서 리렌더링을 지원하지 않는 것 같다.)

Typeit 라이브러리에 대한 정보가 많이 없어서 이유를 제대로 찾지는 못하고, 이것저것 실험해보니 Typeit 컴포넌트를 지웠다가 다시 만드니 적용되는 것을 확인했다.

그래서 Navigation Bar에서 다른 페이지로 이동하기 위해 Link를 클릭할 때 Typeit 컴포넌트를 잠시 지웠다가 다시 만드는 방식으로 코드를 적용시켰다.

loading이라는 상태를 새로 만들어서 link를 클릭해서 페이지를 이동할 때 잠시 loading을 false로 만들었다가 0.5초 후에 다시 true가 되도록 코드를 작성했다.

** 중요! : setTimeout 내부의 setState 함수에서 콜백형태로 isloading을 변경시켜야 한다. setState 함수가 비동기 함수이기 때문에 그냥 변경하면 제대로 적용이 되지않는다. 이전 상태에 의존하면서 상태를 변경하려고 하면 콜백함수로 감싸줘야 한다.

 

일단 기본적인 transition 효과는 적용해봤고 이걸 어떤 효과를 적용할지는 차차 생각해봐야 할 것 같다.