기초 개발 노트

React에서 상태를 관리할 때 useState를 사용하면 비동기 업데이트로 인해 최신 값이 반영되지 않는 경우가 있다. 특히, 디바운싱을 적용한 비밀번호 입력에서 setState가 지연되면서 서버로 전송되는 값이 최신 값이 아니라 이전 값(3글자)만 전송되는 문제가 발생했다. 처음에는 setTimeout을 추가해서 상태가 업데이트될 시간을 주려고 했지만, 여전히 최신 값을 보장하지 못했다. 그래서 Zustand를 활용하여 전역 상태로 관리하면 해결될 것 같았다. 하지만 처음 시도한 방식으로는 상태가 여전히 클로저에 묶여 있고, 제출 시점에서 최신 상태를 반영하지 못하는 문제가 있었다.  비밀번호 입력 로직에서 useState를 사용하면 다음과 같은 문제가 발생한다.setPassword(val) 호출 시..

최근 프로젝트에서 헤더에 있는 플러스 버튼으로 그리드 레이아웃(예: 9열, 3열, 1열)을 전환하는 기능을 구현하려고 했다.처음에는 Home 컴포넌트 내부 상태만 바꾸면 되겠다고 생각해서 Home 컴포넌트에서 gridState라는 useState를 만들어 관리했는데, 막상 헤더에서 plus 버튼을 누르면 이 상태가 업데이트되지 않아 그리드 전환이 되지 않았다.처음엔 Prop Drilling으로 해결할까 했지만 구조가 복잡해질 것 같았다. 차라리 글로벌 상태 관리 라이브러리를 써보자 싶어서 Zustand를 도입했다. 써보니 Redux처럼 많은 보일러플레이트가 필요 없고, 훨씬 간단했다.대략적인 구현 과정은 이랬다:useGridStore.ts 파일을 만들고, gridState(예: "grid9", "grid..