기초 개발 노트

React 상태 관리 문제 해결 과정

Next.js로 주문 내역 페이지를 만들고 있었다. 왼쪽에 주문 목록을 띄우고, 클릭하면 중간 섹션(Middle Section)에 상세 정보가 나와야 하는 구조였다. 근데 주문을 클릭해도 중간 섹션이 빈 채로 남아 있었다. 콘솔을 열어보니 이런 로그가 찍혀 있었다:page.tsx:189 Selected order in useEffect: undefinedpage.tsx:227 Order not found for selectedOrderId: 164API 호출은 잘 됐는데, 왜 데이터가 안 보이는 걸까? 하루를 이거 풀어보느라 씨름했다. 원인 파악코드를 뜯어보니 문제는 상태 관리에 있었다.상태 두 개로 나뉘어 있었다:sortedGroups: /api/orders/daily에서 받은 주문 데이터를 날짜별로 ..

POS 시스템에서 메뉴 데이터를 효율적으로 다루기 위해 usePosStore.ts라는 파일을 수정했다. 여기서 중요한 작업은 메뉴의 고유 번호(menuId)를 항상 확보하는 것이었다. 서버에서 데이터를 받아올 때 menuId가 빠져 있으면 문제가 생기는데, 이를 해결하기 위해 캐시라는 저장소를 활용했다. 문제: menuId가 빠진 데이터POS 시스템은 주문을 표시할 때 각 메뉴의 고유 번호(menuId)가 필요하다. 예를 들어, "라떼"라는 메뉴를 삭제하려면 그 메뉴의 menuId를 알아야 한다. 근데 서버에서 데이터를 받아올 때 가끔 이런 식으로 menuId 없이 오는 경우가 있었다: { "menuName": "matcha", "totalPrice": 4500, "totalCount": 1} 로그..

useMemo란? useMemo는 React에서 값(또는 연산 결과)을 메모이제이션(memoization)하여 불필요한 계산을 방지하는 Hook. 컴포넌트가 렌더링될 때마다 반복되는 비용이 큰 연산을 피하고, 캐싱된 값을 재사용할 수 있게 해준다. 결제 페이지에서 initialTotal과 changes 계산이 매 렌더링마다 반복되는 문제를 해결하기 위해 React의 useMemo를 활용했다. 이 과정에서 useMemo의 동작 원리와 사용법을 깊이 파악할 수 있었다.문제 상황기존 코드에서는 initialTotal이 매번 새로 계산되었다:const initialTotal = selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0); c..

이번에 타입스크립트를 사용해서 Kanban 보드 컴포넌트를 수정했다. 처음엔 타입 오류 때문에 머리가 좀 아팠지만, 해결하고 나니 코드가 더 안정적으로 변한 느낌이 들었다. 이 과정을 기록해두고, 정적 타이핑의 장단점을 정리해보고자 한다. 문제 :  타입 불일치KanbanColumn 컴포넌트에서 버튼 이벤트 핸들러(onAddTodo, onRemoveColumn, onEditColumn)를 부모 컴포넌트로 전달하려고 했는데, 타입스크립트에서 오류가 발생했다. 오류 메시지는 다음과 같았다:'(col: Column) => void' 형식은 '() => void' 형식에 할당할 수 없습니다.대상 서명이 너무 적은 인수를 제공합니다. 1 이상이 필요하지만 0을(를) 받았습니다.ts(2322) 원인을 살펴보니, K..

Kanban 보드에서 editMode, deleteMode, errorMode를 버튼(✏️, 🗑️, ⚠️)으로 전환할 때, editMode가 켜진 상태에서 다른 모드를 클릭하면 editMode가 꺼지지 않고 유지되었다. 또한, deleteMode나 errorMode에서 다른 모드로 전환할 때 editMode가 불필요하게 켜지는 현상이 발생했다.원인 분석Zustand 스토어의 toggleEditMode, toggleDeleteMode, toggleErrorMode 함수는 개별적으로 상태를 토글하도록 설계되었으나, KanbanHeader의 onClick 핸들러에서 다른 모드를 명시적으로 끄는 로직이 불완전했다. 예를 들어, toggleDeleteMode 호출 시 if (errorMode || editMod..

React에서 상태를 관리할 때 useState나 useStore(Zustand)를 사용할 경우, 브라우저 새로고침 후 상태가 초기화되는 문제가 발생할 수 있다. 특히, Supabase와 같은 외부 데이터베이스에서 데이터를 불러와 Zustand에 저장한 후 사용할 때, 새로고침을 하면 UI에는 데이터가 없지만, Supabase에서 데이터를 다시 불러와야 하는 상황이 반복될 수 있다.이 문제는 클라이언트 사이드에서만 데이터를 가져오도록 설정했기 때문에 발생했다. Next.js의 App Router에서는 클라이언트 컴포넌트가 처음 렌더링될 때 상태가 초기화되며, 서버에서 데이터를 미리 가져오지 않으면 클라이언트가 비어 있는 상태로 시작하게 된다.발생한 문제Zustand를 이용해 보드 목록을 상태로 저장하고 ..

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

API 호출을 했는데 자꾸 401 에러가 떴다. 혹시 토큰이 만료됐나 싶어서 로컬 스토리지를 확인했더니 예전에 쓰던 값 그대로였다.만료된 토큰을 계속 사용해서 서버가 신뢰하지 못한 것이다. 그래서 응답 인터셉터를 수정했다. 401 에러가 발생하면 로컬 스토리지에서 accessToken을 삭제하고 로그인 페이지로 리다이렉트하도록 코드를 추가했다. 이렇게 처리하고 다시 테스트해보니, 만료된 토큰으로 인해 401 에러가 발생해도 자동으로 로그아웃되면서 로그인 페이지로 이동했다. import axios from "axios";const axiosInstance = axios.create({ baseURL: "http://localhost:8383", withCredentials: true,});axiosIn..

이미지를 클릭했을 때, 해당 이미지가 화면 중앙에 오도록 스크롤하고, 그 뒤 부드럽게 페이드인하는 기능을 만들고 싶었다.처음에는 window.scrollTo({ behavior: "smooth" }) 정도면 되지 않을까 했는데, smooth 스크롤이 브라우저 기본 기능이라서 지속 시간을 세밀하게 제어하기가 쉽지 않았다.그래서 GSAP의 ScrollToPlugin을 사용하기로 했다. 이걸 쓰면 원하는 시간(0.2초, 0.3초 등)을 직접 지정할 수 있었다. 그러나 또 다른 고민은 사용자에게 스크롤 애니메이션 과정을 아예 안 보이게 하고 싶다는 것이었다. 그래서 스크롤은 즉시 이동(애니메이션 없음)으로 처리하고, 10ms 정도 뒤에 페이드인 애니메이션을 실행했다.  간단한 예시 코드Home.tsx (일부 발..

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