[RN] 레이아웃 전환을 자연스럽게 - LayoutAnimation 활용기

모바일 앱을 개발하다 보면 컴포넌트의 상태에 따라 레이아웃이 바뀌는 경우가 많습니다. 예를 들어, 토글 버튼을 눌렀을 때 상세 정보가 펼쳐지거나, 특정 버튼이 조건에 따라 사라지는 상황이죠.

그런데 이런 변화가 '툭' 하고 일어난다면 사용자 입장에선 꽤 어색하게 느껴질 수 있습니다. React Native는 이런 문제를 해결할 수 있는 간단하면서도 강력한 애니메이션 API를 제공합니다.

바로 LayoutAnimation입니다. 왜 LayoutAnimation인가?

기존의 Animated나 reanimated를 이용하면 세밀한 애니메이션 제어가 가능하지만, 간단한 레이아웃 변화에 매번 값을 상태로 관리하고 애니메이션을 넣는 건 오히려 과할 수 있습니다. LayoutAnimation은 이런 경우에 레이아웃 자체의 변화에 애니메이션을 자동으로 적용해 줍니다.

한 줄만 추가하면, 크기 변화, 위치 이동, 컴포넌트 등장/삭제가 자연스럽게 전환됩니다. 기본 사용법 import { LayoutA...