김민석 / Minseok (Mason) Kim

Post · 2023-01-17 01:47

React 개발 시 함수가 두번 호출되는 문제 방문자 수

React 개발 시 함수가 두번 호출되는 문제

React StrictMode DoubleRender Troubleshooting

Intro

  • react 개발 시 함수가 두번씩 호출되어 useEffect등의 함수를 썼을 때, 문자열이 두번 저장되는 등의 오류가 있다

해결 방법

  • 간단히 index.js내에서
root.render(
<React.StrictMode>
	<App />
</React.StrictMode>
);

React.StrictMode를 주석처리해준다

root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);

Strictmode는 Side effect를 줄이기 위해 함수를 두번씩 실행한다. 이는 dev환경에서만 두번씩 호출되고 Production에서는 무시된다.

Reference

연결문서