24년 1월 16일(화요일) - 71번째 TIL

 

 

리액트 작업을 하다가 useEffect 의 deps 를 [] 로 설정했음에도, 함수 부분이 2번 실행되는 문제가 있었다. 코드는 다음과 같다. 

 

function BuyPage () {
  const navigate = useNavigate()
  const { productId } = useParams()
  const { state } = useLocation()
  const { nickname } = useUserInfoStore()

  useEffect(() => {
    if (state === null) {
      navigate(`/products/${productId}`)
    }
  }, [])
  useEffect(() => {
    if (nickname === '') {
      alert('로그인 후 접근 가능합니다.')
      navigate('/login')
    }
  }, [])
  
  // ...
}

 

2번째 useEffect 에서, 로그인 없이 접근 시 alert 창이 2번 뜨는 문제가 있었다. 

 

이는 main.jsx (나는 빌드 도구를 Vite를 썼다) 에서, 

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import React from 'react'

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

이렇게 되어 있던 main.jsx 를 

 

import ReactDOM from 'react-dom/client'
import App from './App.jsx'

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

이렇게 <React.StrictMode> 를 제거해주었다. 

 

StrictMode는, 리액트에서 제공하는 검사 도구로, 개발모드일 때 디버그를 통하여 이 태그로 감싸진 모든 컴포넌트를 검사하여 안전하지 않거나 권장되지 않은 부분, 배포 후 문제가 될 수 있는 부분까지 확인한다. 따라서 렌더링을 2번 하느라 alert가 2번 떴었다.