컴포넌트 최초 랜더링시에 애니메이션은 재생된다.
하지만 리랜더링시에는 애니메이션이 다시 재생되지 않는 상황이 발생된다.
문제상황
- 라우터를 통해서 같은 포멧의 페이지 전환을 하려고 한다.
- 같은 주소에서
params만 변경되면 주소만 바뀌로 리랜더링이 일어나지 않는다.- 때문에
useEffect를 사용하여 리랜더링을 유도하는 방식으로 사용한다.useEffect의deps에params설정으로 인해params값이 변경시 컴포넌트가 리랜더링 된다.- 여기서 리랜더링시 엘리먼트에 설정한 animation이 재생되었으면 했지만, 재생되지 않는 상황이 발생.
=> 해결방법을 찾아 animation이 다시 재생되도록 한다.
이러한 문제가 발생한 이유는 Virtual DOM 업데이트시 태그 자체의 변경이 아닌 내부 정보(텍스트, 데이터)의 변화만 생겼다고 인지하여 업데이트를 하기 때문에 태그 자체의 animation이 다시 재생되지 않는 것이였다. (animation은 태그에 할당되어있기 때문이다.)
해결방법
태그의 key값을 사용하면 이에 대한 해결이 가능하다.
key값에 랜더링시 변경되는 값을 할당해주면, 리랜더링시 key값이 변경된것을 감지하여 해당 key가 할당된 태그는 다시 생성되는 것을 사용하여 animation을 다시 재생 할 수 있다.
(Virtual DOM tree에서 제거하고 다시 생성)
const [keyValue, setKeyValue]=useState();
return(
<div className='animation-key' key={keyValue}>
<h2>애니메이션아 실행되거라..</h2>
</div>
)리랜더링 되어 keyValue가 바뀌게 된다면 keyValue를 key값으로 가지고있는 태그는 재생성 된다.
Frontend Dev