핵심 요약
데이트팝이 프론트엔드 상태 관리 useState를 재구현하고 DatepopReact로 컴포넌트의 상태를 순서대로 관리하는 문제를 해결하는 과정을 다룹니다.
구현 방법
- 상태 배열(states)와 인덱스(index)로 Hook을 관리
- render에서 index를 0으로 재설정해 호출 순서를 고정
- setState는 인자가 함수인 경우 이전 상태를 전달받아 업데이트하도록 구현
주요 결과
- 초기 렌더링: render: {count: 0, text: "popdeal"}
- App.click() 후 예측 렌더링: render: {count: 1, text: "popdeal"}
- App.type("poppass") 후 예측 렌더링: render: {count: 1, text: "poppass"}