[React] console.log()가 두 번씩 찍히는 이유(Strict Mode)

목차
- 서론
- 두 번씩 찍히는 이유
- Strict Mode란?
- 결론

 

서론

리액트 공부를 하던 중 console.log()가 콘솔 창에 두 번씩 실행되는 현상이 있었다.

 

function App() {
  const [counter, setCounter] = useState(0)
  const onClick = () => {
    setCounter((prev) => prev + 1)
  }
  console.log('i run all the time')

  const iRunOnlyOnce = () => {
    console.log('i run only once')
  }

  useEffect(iRunOnlyOnce, [])

  return (
    <div>
      <h3>{counter}</h3>
      <button onClick={onClick}>click me</button>
    </div>
  )
}

두 번씩 찍히는 이유

React의 Strict Mode 때문이다.

main.jsx를 살펴보면 <StrictMode>로 감싸져 있는 것을 볼 수 있다.

 

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

 

Strict Mode란?

ES5부터 추가된 것으로, 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.

 

즉 개발 도중 발생하는 문제를 감지하고 예방하기 위한 도구이다.

공식문서에 의하면 버그를 찾기 위해서 의도적으로 useEffect와 같은 함수를 두 번 호출한다고 한다.

 

그리고 이러한 역할을 한다고 한다.

• 잠재적 버그, 부적절한 API 사용, 의도치 않은 부수 효과 등 예방
• 일부 코드들을 두 번 실행해서 문제가 될만한 부분들을 더 잘 찾아냄
• 오직 개발환경에서만 작동

 

결론

로직에서는 전혀 문제가 되지 않는다. 그러니 본인이 잘못하고 있는 게 아니라는 말이다!

그렇지만 정 신경 쓰인다면 <StrictMode>를 주석처리하거나 지우는 것도 방법이다.