React useEffect에 관해서

Question

export default function App() { const [test1, setTest1] = useState(0); const [test2, setTest2] = useState(0); useEffect(() => { setTest1(1); }, []); useEffect(() => { setTest2(1); }, []); console.log("test"); return (

Hello CodeSandbox

Start editing to see some magic happen!

); } 질문 : 왜 브라우저 콘솔에 "test"가 두번 찍히는 건가요? React의 리렌더링이 되는 조건은 1. props 업데이트 2. state 업데이트 3. 부모 컴포넌트 리렌더링 으로 알고있습니다. 컴포넌트 렌더링 과정은 코드 평가 -> return 실행 -> useEffect 로 알고있습니다. 그럼 return 실행 이후에 첫 번째 useEffect를 실행하고 test1 state 업데이트 후, 리렌더링되어 "test" 출력한 후에 두 번째 useEffect 실행하고 test2 state 업데이트 후, 리렌더링되어 "test" 출력 그럼 총 "test"가 3번이 나와야 하는데 막상 실행해보면 2번이 출력됩니다. 틀린부분과 이유가 궁금합니다.

몰랑토끼 · Answer

index.js의 stictmode 때문에요

임시저장보관소 · Answer

dev 모드면 2번 찍힐꺼에요참고로 useEffect + state 는 최악의 조합입니다...

Hee Sung Son · Answer

react 는 상태 업데이트를 여러번 요청하더라도 한번에 모아서 처리합니다.즉 useEffect는 말씀하신대로 한번 업데이트 된뒤에 실행되는게 맞지만2개의 useEffect가 있으므로 따로 useState가 실행되지만 묶어서 업데이트 처리하기 때문에 1번만 리렌더링 되어 콘솔로그가 2번찍히는 상황이 됩니다.

React useEffect에 관해서

3개의 답변

#useeffect 목록