[나만무] React 렌더링 트러블이슈

배경

 

테트리스 게임에 모션 인식을 집어넣어서 테스트 하는 중이다. 구글의 MediaPipe 모션 인식 라이브러리를 사용했는데, 손의 "모션"을 인식하는데에 애를 먹고있다. 멈춰있는 제스처나 모습은 사용 예제가 많은데 손의 모션을 인식하는 예제는 드물어서 직접 구현하는 중이다.

 

최종 목표는 특정 블록의 모양을 손으로 나타내는 것을 인식하는 것이다. 지금은 단순하게 손을 내리고, 올리고, 왼쪽/오른쪽으로 미는 모션만을 감지한다.

 

트러블 슈팅

 

 

사진에서는 테트리스와 손 인식의 동시성을 테스트해보는 중이다. 웹캠 화면에서 손을 인식하고 화면에 그리는 컴포넌트와 테트리스 보드 컴포넌트를 하나의 부모 컴포넌트에 담았는데, 문제가 발생했다. 따로따로 작동시키면 잘 동작하는 것들이 동시에 작동시키면 일정 시간 이후 html에서 아예 삭제된다. 콘솔을 보면서 확인해본 결과, DOM 렌더링 문제라고 생각되었다.

 

테트리스는 일정 틱마다 화면이 렌더링되지만, 모션인식은 프레임마다 렌더링된다. 그러나 한 부모 컴포넌트에 테트리스와 모션인식을 담아놓다보니 모션인식 렌더링이 발생할 때마다 테트리스도 계속해서 렌더링이 발생한다. 웹캠 프레임마다 계속해서 렌더링이 발생하다보니 DOM에서 오류가 발생하고 html 파일에서 지워진 것으로 보인다. 사이드 이펙트 관리가 미흡했던 것이다.

 

 

솔루션

 

단순히 컴포넌트를 잘 분리하는 것으로 해결할 수 있었다.