React 에서 자식 컴포넌트에게 넘겨준 boolean 값이 한박자 느리게 반응하는 문제 어떻게 해결하나요?

안녕하세요! 질문자님께서 말씀하신대로라면, 부모 컴포넌트에 check라는 상태가 정의되어있고, alert이라는 상태는 자식 컴포넌트에 정의되어있을 것 같은데요. 혹시 아래와 같은 코드가 맞을까요? import { useState, useEffect } from "react"; const App = () => { const [check, setCheck] = useState(false); const handleClick = () => { setCheck(true); }; return ( <> <button onClick={handleClick}>check를 true로 만들기</button> <Child check={check} /> </> ); }; const Child = ({ check }) => { const [alert, setAlert] = useState(false); useEffect(() => { if (check) { setAlert(true); } else { setAlert(false); } }, [check]); return <div>{alert ? "true로 변경됐어요." : "원래는 false였습니다."}</div>; }; export default App; 혹시 이런 형식으로 구성하신 게 맞다면, "check를 true로 만들기" 라는 버튼을 "한 번" 클릭했을 때, 아래와 같이 동작할 것 같아요. 1) 부모 컴포넌트에서 선언한 check 상태가 업데이트되었으므로 부모 컴포넌트가 리렌더링 2) 부모 컴포넌트가 리렌더링되면서 업데이트된 check 값을 자식 컴포넌트에 전달 3) 자식 컴포넌트가 리렌더링되면서 useEffect hook을 실행(check가 의존성 배열에 있으므로) 4) check 값이 true이므로 setAlert(true) 실행 5) alert 상태가 업데이트되었으므로 자식 컴포넌트가 리렌더링 6) alert 값이 true이므로 화면에는 "true로 변경됐어요." 라는 문구가 나옴 이와 같이 정상적인 상황이라면 버튼을 "한 번" 클릭했을 때, 질문자님께서 기대하셨던 동작을 할거라는 생각이 듭니다만, 혹시 제가 놓친 부분이 있을 수 있으니 가능하시다면 전체 코드를 첨부해주시면 좋을 것 같아요. 답변드리는데에 조금 더 도움이 될 것 같습니다.