react-transition-group

개인적으로 프로젝트를 작업하면서 원하는 기능이 생겼다. 그래서 그걸 다루기 위해서 이것저것 찾다보니. react-transition-group 라는 걸 배웠다.

react-transition-group는 React 애니메이션을 관리하기 위한 라이브러리다. React 컴포넌트의 마운트, 언마운트, 업데이트 시에 애니메이션 효과를 쉽게 적용할 수 있도록 도와준다.

npm install react-transition-group

위의 커멘드를 입력해서 설치를 한다. 이제 하나하나 알아보도록 하겠다.

Transition

Transition은 컴포넌트의 등장과 사라짐을 애니메이션으로 처리한다. in 속성을 사용하여 컴포넌트의 상태를 제어하고, timeout 속성을 사용하여 애니메이션 지속 시간을 설정한다.

CSSTransition

CSSTransition은 Transition 컴포넌트를 기반으로 CSS 클래스를 활용한 애니메이션을 적용한다. CSS 클래스명을 이용하여 컴포넌트의 상태에 따라 애니메이션을 적용할 수 있다.

TransitionGroup

TransitionGroup은 여러 컴포넌트의 등장과 사라짐을 관리하는 컨테이너 역할을 한다. 동적으로 컴포넌트를 추가하고 제거할 때 애니메이션을 적용할 수 있다.

사용 예시

1. Transition.css

.page-transition-enter {
  opacity: 0;
  transform: translateY(30%);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0%);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(-100%);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

첫 번째는 Transition.css다. 이름은 크게 두 부분으로 나눌 수 있는데 하나는 클래스의 이름이고, 다음은 애니메이션 단계를 나타내는 말이다.

여기서는 page-transition은 클래스 이름이고 그 뒤는 애니메이션 단계다. 주로 애니메이션 단계에 대해서는 네이밍 규칙이 어느 정도 정해져 있다.

1. enter: 요소가 등장하는 애니메이션의 시작 상태.
2. enter-active: 요소가 등장하는 동안 애니메이션이 진행되는 상태.
3. exit: 요소가 사라지는 애니메이션의 시작 상태.
4. exit-active: 요소가 사라지는 동안 애니메이션이 진행되는 상태.

2. TransitionGroup / CSSTransition

<TransitionGroup>
  <Routes>
    <Route path="/" element={
      <CSSTransition
        key={"pathname"}
  		in={true}
		timeout={300}
		classNames="page-transition"
	    unmountOnExit>
    	<Main />
    </CSSTransition>
  }/>
  </Routes>
</TransitionGroup>

위의 예시는 원래 코드의 일부를 발췌해 온 거다. 그래서 하나의 컴포넌트에 관해서는 TransitionGroup이 필요가 없다. 그러나 여러 컴포넌트를 한 번에 관리할 때는 꼭 필요하며, 이때 CSSTransition에는 key가 꼭 필요하다.

CSSTransition을 하나하나 해부해보면,

1. key: CSSTransition 컴포넌트를 구별하기 위한 고유 key가 필요.
2. in: 속성은 애니메이션의 진행 여부를 결정. true로 설정되면 애니메이션이 발생하고, false로 설정되면 애니메이션이 종료.
3. timeout: 애니메이션의 지속 시간.
4. classNames: 애니메이션에 사용될 CSS 클래스명.
5. unmountOnExit: unmountOnExit 속성이 true로 설정되면 애니메이션이 종료된 후에 해당 요소가 DOM에서 제거.

결과 이미지

이를 적용한 결과 이미지다. 페이지가 그냥 나오는 것이 아니라, 콘텐츠가 떠오르듯이 올라오게 해준다.

정리하기

react-transition-group에 대해 공부했다. 이 라이브러리는 컴포넌트의 애니메이션을 쉽게 설정할 수 있도록 해준다. 처음에 새로운 라이브러리를 적용하는데 애를 먹었지만, 이해하고 나서는 그렇게 어렵지 않았다.

또한 프로젝트를 진행하면서 원하는 기능을 찾아 검색하고 기록하는 것이 중요하다는 걸 매일 깨닫는다. 하나 했다고 해서 넘기는 개발자가 아닌 개념과 원리를 이해할 줄 아는 개발자가 되어야겠다.