Announcing TypeScript 5.4 - TypeScript
TypeScript
안녕하세요!
질문자님께서 말씀하신대로라면,
부모 컴포넌트에 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로 변경됐어요." 라는 문구가 나옴
이와 같이 정상적인 상황이라면 버튼을 "한 번" 클릭했을 때, 질문자님께서 기대하셨던 동작을 할거라는 생각이 듭니다만, 혹시 제가 놓친 부분이 있을 수 있으니 가능하시다면 전체 코드를 첨부해주시면 좋을 것 같아요. 답변드리는데에 조금 더 도움이 될 것 같습니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 3월 19일 오후 1:11
댓글 0
함께 읽은 게시물
🎯 유튜브에 100번째 코딩 테스트 문제 풀이 영상을 올렸습니다!
지
... 더 보기
오늘은 투자 완료일이자 아미고 런칭 100일. 별 생각 없었는데, VC 파트너님이 축하한다며 파티 안하냐고 전화주셨길래 편의점에서 맥주 한 캔과 꼬깔콘으로 조촐하게 파티 했습니다. 이제부터가 진짜 시작이겠죠. 잘 부탁드립니다.
... 더 보기-
어제 출시된 따끈따끈한 ChatGPT Codex를 실제 프로젝트 레포에 써 보았습니다.
테스트가 있으면 스스로 테스트도 실행하고, 만든거 스스로 실행해보면서 버그도 수정하고 하는게 기특하긴 합니다.
