React 리렌더링시 애니메이션과 컴포넌트 key

const resultArray = [20, 10, 1, 11, 9, 3];

...

<div>
	{resultArray.map((item, index) => (
		<p key={index} style={{
			animation: 'ball_keyframe 2s linear forwards',
			animationDelay: `${index * 2}`
		}}>
			{item}
		</p>
	)}
<div>

위 코드에서 index 는 매번 리렌더링 될때마다 같은 값 0, 1, 2, 3, 4, 5 일것이다.

이 경우 리렌더링 이전과 리렌더링때 key 값이 같으므로 리액트에서는 key값이 중복되는 애들의 애니메이션이 적용되지 않는 것을 알아냈다.

매번 리렌더링될 때 key값을 다르게해줘서 애니메이션이 리렌더링때마다 적용되도록 해야했으므로

<p key={Math.random() * index} ..

Math.random() 메서드를 사용했다. 위 코드의 문제는 리렌더링때마다 index 값이 0 인 첫번째 p태그는 애니메이션이 적용되지 않는다는 것이다.

문제 해결

<p key={Math.random() * (index + 1)} ...

이제 리렌더링될 때 모든 p 태그에 애니메이션이 적용된다.