ErrNote] (리액트 애니메이션처리) 리렌더링 시 애니메이션이 되지 않을 때

리액트 리 렌더링 시 애니메이션이 되지 않을 때 처리 방법

리액트에서 간단하게 애니메이션을 구현하다 첫 렌더링 시 애니메이션이 정상 작동하지만

데이터를 새롭게 받아와 리 렌더링이 되었을 때 애니메이션 효과가 적용이 안 되는 이슈가 발생했습니다!

해결한 방법은 애니메이션 효과를 적용해야하는 컴포넌트에 key값을 추가하여 해결하였습니다!

key값을 추가하기 전 애니메이션 효과가 적용되지 않은 이유

리 렌더링 시 리액트는 내부 콘텐츠만 변경하게 됩니다.

이때, key를 추가하면 key가 변경될 때 다른 엘리먼트로 인식하기 때문에

애니메이션 효과가 적용됩니다!