[Next.js] AR 물고기 두마리가 겹쳐 보이는 현상?! useEffect 2번 호출 문제!

1. AR 물고기 두 마리가 겹쳐 보이는 현상?!

Next.js에서 mind-ar 라이브러리를 이용해 웹 AR을 구현하고 있다. 카메라에 Target 이미지가 들어오면 물고기 3D 모델이 렌더링 되도록 하였다. 다행히도 잘 렌더링 되었는데 물고기 상태가 좀 이상하다. 파들 파들 떠는 것 같기도 하고 영화 매트릭스나 사이버펑크에서 봤던 화면 지직 거리는 것 같기도 한 현상이 발생했다.

[그림 1] 이중으로 그려진 3D 모델

 

2. 원인은 useEffect 2회 호출 문제

원인은 useEffect 훅이 2번 호출되는 문제 때문이었다. 일전에 html에서 테스트했던 코드에서는 이런 현상이 없었던 점, react에서 <React.StrictMode>로 설정되어 있는 경우 useEffect가 2회 호출된다는 것을 알고 있었다. 그래서 Next.js에서도 유사한 현상일 거라 생각했고 역시 그랬다. next.config.js에 reactStrictMode를 false로 설정하니 물고기 한 마리만 차분하게 잘 그려졌다! 수정한 코드는 아래와 같다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // 이 코드를 추가
};

module.exports = nextConfig;

 

참고 자료
https://funveloper.tistory.com/110