[리액트] lottie-web 라이브러리 두 번 로드되는 문제 (Strict mode)

lottie-web

• lottie-web을 쓰면 useEffect훅에 ref에 lottie를 집어 넣을텐데, 이 때 svg가 두 번 로드되는 문제가 있다.
• 아마 DOM에 추가되기 전에 한번, 그 후 한번 이렇게 두 번 되는 것 같다. 
• 아래와 같이 clean-up 함수를 이용해주면 해결된다.

 

리액트의 Strict mode (추가)

• useEffect훅에 의존성에 빈 배열 해놨는데 로그 찍으면 계속 두 번씩 찍혀서 이상했는데
• 찾아보니까 Strict mode라는게 작동해서 디버깅을 더 엄격하게 하는 거였음
• index나 패키지에서 없애면 됨 (구글링해보셈)
• 리액트 맘에안드네