Home 화면의 애니메이션 구현과정에서 어려움이 생겼습니다.

Untitled

Untitled

면접 모드를 클릭하면 HomeRightContainer 는 HomeLeftContainer 의 뒤쪽에서 펼쳐지듯 등장하고, HomeLeftContainer 는 그 만큼 왼쪽으로 밀리며 최종적으로 펼쳐진 두 컴포넌트가 가운데 정렬이 되도록 구현하고 싶었습니다.

그 과정에서 발생한 이슈들을 순서대로 아래에 작성하겠습니다.

1. HomeRightContainer에 애니메이션을 적용해보자

애니메이션을 적용하기 위해 selectedMode가 바뀌면 HomeRightContainer 는 visibility : hidden 에서 visibility : visible 로 바꿔주면 될 것이라고 생각했다. 하지만 이 방법은 hidden 일 때도 공간을 차지하기 때문에 HomeLeftContainer 가 초기에 중앙 정렬 되어있지 않게 된다.

display: none VS visible: hidden

그럼 공간을 차지하지 않는 display : none 을 이용하면 어떨까? 중앙 정렬 문제는 해결된다. 하지만 컴포넌트 자체가 mode를 선택하는 순간 마운트 되는 방식으로 바뀌게 되므로, 클래스의 변화를 이용한 애니메이션을 적용할 수 없다.

2. 컴포넌트가 마운트/언마운트 될 때 애니메이션을 적용해보자

리액트에서 컴포넌트가 마운트/언마운트 시에 애니메이션을 적용할 수 있는 React-Transition-Group을 사용해보았다.

리액트 컴포넌트 마운트 애니메이션 React-Transition-Group

HomeRightContainer 가 마운트, 언마운트 될 때 애니메이션 구현을 성공했다.

SCSS

.HomeRightContainer {
	...
  transform: translateX(-100%);
  opacity: 0;
  transition: all 1s;

  &.entering {
    transform: translateX(0%);
    opacity: 1;

  }
  &.entered {
    transform: translateX(0%);
    opacity: 1;

  }
  &.exiting {
    transform: translateX(-100%);
    opacity: 0;

이런식으로, HomeRightContainer 가 왼쪽에 있다가, 마운트 되는 순간 원래 자리로 등장하도록 하였다.

3. HomeLeftContainer 의 애니메이션이 이상하다

HomeLeftContainer 는 HomeRightContainer 가 마운트 되는 순간 가운데에서 왼쪽으로 밀려나야 한다. 하지만 HomeRightContainer 가 등장하면 HomeRightContainer 의 크기만큼 왼쪽으로 밀린 상태로 시작하기 때문에 자연스럽게 왼쪽으로 밀리는 애니메이션을 구현할 수 없다.

이를 해결하기 위해 React-Transition-Group 을 HomeLeftContainer 에도 적용하였다. HomeRightContainer 가 등장하면 (selectedMode가 클릭되면) HomeLeftContainer 는 entering 상태가 된다. 그 순간, 애니메이션을 적용하지 않고 한번에 HomeRightContainer 의 너비의 절반만큼 오른쪽으로 이동한 상태로 만든다. 즉, 원래대로라면 왼쪽으로 밀린 상태로 시작해야 하지만, 그 만큼 오른쪽으로 밀어둔 상태로 시작하여 가운데 정렬이 되어있는 것 처럼 눈속임을 하는 방법으로 구현하였다.

entering 상태에서 entered 상태로 변할 때 비로소 왼쪽으로 이동하는 애니메이션을 넣어준다. exiting과 exited에도 비슷하게 구현하도록 하였다.

이 때, HomeRightContainer 의 너비를 받아와야 하는데, 반응형 웹페이지이다 보니 정확한 픽셀로 받아올 수는 없고 JS로 직접 계산하여 구해내야 했다. 그렇게 구해낸 width를 CSS로 넘겨주기가 생각보다 번거로웠고, 그냥 tsx 파일 내에서 인라인으로 스타일을 넣어주기로 하였다. 이 방법으로 HomeRightContainer 의 width를 스타일링에 사용할 수 있었다.

결론

처음엔 탭 애니메이션 같은 간단한 슬라이드 애니메이션 일 줄 알았습니다.

하지만 두개의 컴포넌트가 동시에 움직이도록 하려니 공간 차지에 의한 정렬 문제가 발생하고, 언마운트 시에도 애니메이션을 적용해야 하는 점, 그리고 js로 width를 받아오는 과정에서 인라인으로 CSS를 구현해야 하는 점 등 생각보다 번거롭고 어려운 점이 많았습니다.

하지만 이 과정에서 React-Transition-Group 라이브러리를 알게 되었고, 이를 이용히여 페이지 전환 애니메이션도 구현할 예정입니다.