incodevelop

🧩 React와 웹소켓 타이밍 이슈, Closure

MakeCandidate.tsx에서는 WebSocket 응답으로 받은 voteLimit 값을 기반으로 조건 분기(voteLimit !== null)하여 공(ball)을 생성한다.하지만 예상과 달리 voteLimit이 null이 아님에도 null로 참조되어, 제한/무제한 여부가 잘못 반영되는 공이 생성되는 문제가 발생했다.🔍 원인 분석1. React 함수형 컴포넌트의 클로저 구조WebSocketProvider 컴포넌트에서 Websocket 응답을 받고 setVoteLimit으로 voteLimit 상태를 업데이트 하고 있다.아래 subscribeAll 함수 내부에서는 업데이트 된 voteLimit 값을 사용하고 싶었으나, 항상 null로 참조가 되었다. // AS-ISuseEffect(() => { //..

🚨  TroubleShotting문제 발생의 배경 - As Is투표 시간을 설정하는 타이머에서 Input을 클릭하면 해당 시간 선택창(TimePicker)이 열리도록 하고,열려 있는 상태에서 외부를 클릭하면 TimePicker가 닫히도록 구현하고 있었다.이 과정에서 두 가지 큰 이슈를 겪었다:❗️ 문제[true, false] 상태에서 Input을 클릭하면 handleClickOutside가 실행되어 [false, false]로 닫혔다가,곧이어 다시 [true, false]로 다시 열리는 현상이 발생함.# 1) 이 상태에서 [false, false]로 상태를 변경하고자 함timeOpen => [true, false]# 2) 그런데 [false, false]가 되자마자 곧바로 다시 [true, false]..