Next.js Turbopack dev에서 렌더링이 두 번씩 될 때
Next.js Turbopack dev에서 렌더링이 두 번씩 될 때 dev 실행 시 렌더링/이펙트가 두 번 실행된다? React Strict Mode 리액트의 StrictMode 는 디버그를 위한 몇 가지 기능을 제공해 준다. 그 중에는 이펙트나 렌더링 단계의 버그를 잡기 위해 실행되는 다음과 같은 기능이 이런 문제를 만든다. 렌더링 단계에서 발생하는 문제를 찾기 위해 컴포넌트가 한 번 더 렌더링 된다. 이펙트 정리 누락으로 발생하는 문제를 찾기 위해 이펙트가 재실행 된다. Deprecated된 API 사용을 탐지한다. 이 중 1번과 2번 때문에 이펙트/렌더링이 두 번씩 실행되는 문제가 발생하게 된다. 발생할 수 있는 문제? StrictMode는 디버그 단계에서 매우 유용하지만, 간단한 예시로 다음과 같은 코드에서 문제가 발생할 수 있다. "use client" import { ReactNode , useEffect , useState } from "react" ; export default function ClientComp ( { children } : { children : ReactNode } ) { const [ count , setCount ] = useState ( 0 ) ; useEffect ( ( ) => { setInterval ( ( ) => { setCount ( count => count + 1 ) ; } , 1000 ) ; } , [ ] ) ; return < div > < h1 > Hello , Next . js ! ! ! { count } < / h1 > { children } < / div ...
