달성 페이지에서 달성에 대한 확실한 유저 피드백을 주기 위해서 달성 정도에 따라 버튼 색을 꿈의 색으로 변경시키고, 꿈틀의 애니메이션 속도를 변경하는 작업이 필요했었습니다.
최종적인 결과물로써 다음과 같이 버튼을 누른 gauge에 따라 색 및 애니메이션의 속도가 변하며, 달성 시 3초 뒤 다음 화면으로 넘어가는 기능을 완성할 수 있었습니다.
이 기능을 개발하기 위해서 다음과 같은 고민들을 하면서 개발을 진행했었습니다.
우선 처음 시도했던 방법으로 state를 이용하는 방법을 이용했습니다. 꿈틀거리는 이미지를 그려주는 Ggumtle 컴포넌트에서는 props를 통해 speed를 받고 있습니다.
이를 이용해서 gauge를 state로 놓고 setInterval을 통해 speed prop의 값을 변경시켜 줍니다.
console.log를 확인해보면 gauge는 100까지 끝가지 잘 올라가지만 그 사이의 re-render로 인해서 Ggumtle 컴포넌트의 애니메이션이 계속해서 깜빡거리는 현상을 확인할 수 있습니다.