개인 프로젝트 진행과정 중 하나인 Tetris를 구현하는 작업에 있었다. 테스트 과정 중 정말 골치 아픈 문제가 발생했다. 블록이 보드 밖으로 빠져나가거나, 블록이 겹쳐지거나 엉뚱한 곳으로 점프를 해서 에러를 뿜어댔다.
에러사례1
블록이 점프를 하는 사례.
에러사례2
블록의 한부분이 겹치거나 점프를 한 것 때문에 인덱스를 찾지못하는 상황같다. 심지어 제일 바닥에 닿자마자 바로 위의 에러를 뿜어준다.
처음엔 Styled-component에서 Props가 문제인줄 알고 괜히 여러번 작성했었다..
또 로직에 오타가 있는지 여러차례 수정하고 확인도 해보았으나 코드는 전혀 이상이 없었다. 그렇게 한참을 해메던 중 React.StrictMode가 원인이었음을 깨닫게됬다.
일단 맛을 봤으니 알아봐야겠지
React.StrictMode가 뭐야?
React 공식 문서에 따르면 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.라고 작성되어있다.
조금 더 자세히 알아보자면 다음과같다.
-
내부 구성 요소가 권장 사항 중 일부 방법을 따르고 있는지 확인하고 콘솔에 없는 경우 경고한다.
-
사용되지 않는 메서드가 사용되고 있지 않은지 확인하고, 엄격한 모드를 사용하면 콘솔에서 경고한다.
-
잠재적인 위험을 식별하여 부작용을 예방할 수 있도록 도와준다.
그렇기 때문에 <React.StrictMode> 태그 내에서 개발자가 미처 발견하지 못한 문제들을 발견하여 경고를 해준다. 문제는 경고하기 위해서 두 번 렌더링을 하게된다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
)보통 npx create-react-app project로 React앱을 생성하게 되면, 자동으로 추가시킨다.
<StrictMode />는 개발 모드에서만 작동되며, 프로덕션 빌드에는 영향을 끼치지 않는다고한다.
하지만 <StrictMode />는 코드의 문제를 감지하고 경고하기 위해서 구성 요소를 두 번 렌더링하는 특성을 가지고있기 때문에 여러번 렌더링하는 테트리스 게임에서 문제가 발생했던 것이었다.
드디어 문제를 찾았다.
해결방법
너무나 간단하다 굳이 반드시 사용할 필요는 없으므로 <React.StrictMode>태그를 지우면된다.
그래도 혹시 모르니 테스트를 제외하고, 태그를 달아두기로 했다.
