React Lifecycle 에 대해서 질문 드립니다.
조회수 396회
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
const handler = () => setCount(count+1);
React.useEffect(() => {
console.log('렌더링 완료')
}, []);
console.log(123123);
return (
<div className="App">
{count}
<button onClick={handler}>+</button>
</div>
);
}
export default App;
위의 코드를 실행하게 되면 콘솔에
123123
123123
렌더링 완료
이렇게 123123이 2번이 뜨게되는데요, 제가 생각할땐 1번 떠야되는게 맞는거 같은데 2번이 뜨더라구요.. 그것도 hook을 사용하면 2번뜨고, 사용하지 않으면 1번뜨는데 이렇게 되는 이유가 궁금합니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
https://github.com/facebook/react/issues/15074
StrictMode의 의도된 기능이며 development 환경에서만 발생한다고 합니다.
렌더링 단계로 진입하면서 발생하는 예기치 않은 부작용을 찾기 위해 두 번 실행한다고 하네요.
해당 현상은 production 빌드를 하면 정상적으로 한 번 실행될 것으로 예상됩니다.
댓글 입력