react] 트래지션으로 컴포넌트 이동하는 라이브러리 react-transition-group

프로젝트 작성을 하면서 리액트 컴포넌트간 이동을 할때 자연스러운 효과가 없을까 하다 검색해서 찾은 react-transition-group입니다.

 

사용법 익히느라 좀 애먹었는데 정리하자면

 

일단 트레지션 컴포넌트를 따로 만들어두고

app.js에 있는 라우터에 호출하는 방법입니다.

 

처음에는 app에 직접 호출해서 사용하려고했는데 소스가 꼬인건지 제대로 작동을 하지 않았습니다

 

참고 (https://sso-feeling.tistory.com/548)

 

이분 블로그를 보고 해답을 얻었습니다.

이제는 쓰지않는 메소드가 있지만 스위치를 라우터로 교체하고 해시라우터 또는 브라우져 라우터로 교체하여 작성하니까 제대로 작동이 되었습니다.

 

나머지는 css를 수정해서 원하는 효과를 주면 됩니다.

 

전체적인 컴포넌트 구조는

 

app.js < - transition.js <-A.js B.js C.js

 

이런식이고

 

app의 라우팅하여 사용했습니다.

 

요즘 리액트로 프로젝트를 진행하면서 여러가지 라이브러리를 찾게되고 익히게 되니까 욕심이 많이 나네요.