서론React에서 타이머(setTimeout)를 이용하여 일정 시간 후에 특정 함수를 호출하는 기능을 구현하던 중,함수 내부에서 참조하는 상태(state)가 최신값이 아닌 과거 값으로 작동하는 문제가 발생했다. 문제 원인을 체크해보니 React의 비동기 렌더링 이슈가 아닌 자바스크립트의 클로저(Closure)의 특징으로 발생한 것이라는 걸 알게 되었다.문제 상황const goToMaintainPage = () => { // 작업 상태값을 저장하고 다음 페이지로 이동// mySwrState : 생성한 커스텀 useSWR 임 setMySwrState({ ...mySwrState, director: directorName, // useState 값(생성했다고 가정) workerNumber:..

학습 목표 * 컴포넌트 기반 bottom-up 방식 개발에 대한 이해 * storybook 활용: 컴포넌트 UI 개발에 도움을 주는 라이브러리 * 구조적으로 CSS를 작성하는 방법 * styled-Component 활용: 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리 * useRef Hook 활용: DOM Reference를 활용하기 위한 hook 컴포넌트 단위로 개발하기 Component Driven Development(CDD) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식(레고처럼) → 컴포넌트 생성 → 컴포넌트 결합 → 페이지 조립 재사용할 수 있는 UI 컴포넌트를 활용하는 방식이다 컴포넌트 UI 개발을 위한 Storybook Component Driven Development를 지원..