RN 프로젝트를 진행하며 터치시 확장되는 컴포넌트에 애니메이션을 추가하고 싶어 평소대로 Animated API 를 사용해 작업하다 다른 방법은 없을까 검색하다 Layout Animation API를 알게되었다.

Layout Animation

공식 문서🌐
간단한 예시와 설명 Medium

간단한 작동 원리

1. 개발자가 애니메이션 설정 혹은 프리셋을 LayoutAnimation.configureNext(animationConfig) 통해서 설정해두면
2. React Native는 현재 렌더 단계에서 모든 구성 요소의 레이아웃 스냅샷을 생성.
3. 리렌더링을 일으키는 State 변경이 일어나면 리렌더링된 요소의 레이아웃 스냅샷을 생성.
4. diffing 알고리즘으로 기존, 새로운 레이아웃을 비교해 달라진 요소들에 configureNext에서 설정한 애니메이션을 적용

적용한 코드

const toggleIsExpanded = () => {
    // LayoutAnimation 적용
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
    setIsExpanded(prev => !prev)
  }

위 코드 한줄로 매우 쉽게 컴포넌트가 확장되며 Height가 달라질때 부드럽게 애니메이션이 적용되었다.

Animated API와 비교

Animated API를 사용해 기능을 구현하려면

• Height값을 Animated Value로 지정하고
• isExpanded state를 바탕으로 useEffect 훅 안에서 Height 값을 바꿔줌
• 위 Animated Height 를 Animated.View에 적용

방법으로 접근했는데 다음과 같은 문제점들이 존재했다.

• Height가 고정된 값이 아닌 컴포넌트 안의 요소들에 따라 달라져 정확한 값을 알 수 없음
• 불필요하게 코드가 길어지는 느낌

결론

Animated API

• LayoutAnimation API 가 지원하지 않는 애니메이션 속성들 (backgroundColor, position....)을 지원할때
• 조금 더 복잡하고 정밀한 애니메이션을 적용할때 (interpolation등)

Layout Animation API

• 레이아웃 전체에 간단한 애니메이션들을 적용할때