상황
app.js 에서 useEffect 내부에 console.log() 를 실행하니 2번 찍히는 이슈가 발생하였다.
1
2
3
4
5
6
7
8
// app.js
useEffect(() => {
console.log('render!');
}, []);
// 'render!'
// 'render!'
해결
index.js 에 설정되어 있던 React.StrictMode 를 제거해주었다.
before
1
2
3
4
5
6
7
8
9
// before
...
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
...
after
1
2
3
4
5
...
root.render(<App />);
...
해당 이슈는 개발모드에서만 발생하고 아래의 부분들에 대해 도움을 준다고 한다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
내 생각에는 렌더링 체크 시에만 주석처리를 진행하고 테스트가 완료된 경우 다시 적용해주는 방향으로 진행하면 좋을 것 같다.