Zustand React 리렌더링 기준: 상태 변경이 화면에 반영되는 흐름 이해하기
이 글에서 정리하는 내용 Zustand를 사용할 때 리렌더링을 판단하는 기준을 React 렌더링 흐름과 연결해서 정리합니다. store 전체가 바뀌었는지가 아니라, 컴포넌트가 어떤 값을 선택해서 구독하고 있는지가 핵심입니다. React 리렌더링부터 확인해야 하는 이유 Zustand에서 상태를 읽는다는 의미 store …
더 읽기React
컴포넌트 기반으로 UI를 구성하는 JavaScript 라이브러리 React 전반을 다룹니다.
TanStack Query Hydration 오류 해결: HydrationBoundary와 QueryClient 설정 확인하기
이 글에서 정리하는 내용 TanStack Query Hydration 오류는 서버에서 prefetch한 데이터와 클라이언트 QueryClient가 같은 캐시를 공유하지 못할 때 자주 생깁니다. QueryClient 생성 위치, dehydrate/Hydrat…
더 읽기
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
이 글에서 정리하는 내용 Radix UI와 shadcn/ui를 경쟁 라이브러리처럼 오해해 선택 기준이 흐려지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가 난 순간 바로 …
더 읽기
shadcn/ui 설치 오류 해결: components.json과 import alias가 맞지 않을 때
이 글에서 정리하는 내용 shadcn/ui 컴포넌트 생성 후 @ alias와 실제 폴더 구조가 맞지 않아 import가 깨지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가…
더 읽기
React Hook Form Zod 연결 오류 해결: resolver 타입이 맞지 않을 때 확인할 것
이 글에서 정리하는 내용 React Hook Form에 zodResolver를 붙였는데 schema, defaultValues, optional 처리 때문에 타입이 맞지 않는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하…
더 읽기
React Hook Form 에러 메시지 표시 문제 해결: validation이 안 보일 때 체크리스트
required나 minLength를 넣었는데 errors 객체가 비어 있거나에러가 있는데 화면에 표시되지 않는 경우가 생깁니다. validation이 안 보일 때는 에러가 없는지, 표시만 안 되는지 나눕니다 React Hook Form에서 에러 메시지가 안 보인…
더 읽기
Zustand 실무 사용 기준: store가 복잡해질 때 피할 실수
이 글에서 정리하는 내용 Zustand는 문법이 짧아서 프로젝트에 빠르게 붙일 수 있지만, 실무에서는 어떤 상태를 전역 store에 넣을지 먼저 정하지 않으면 구조가 쉽게 흐려집니다. 이 글은 Zustand를 사용할 때 상태 범위, 서버 상태 분리, selector, …
더 읽기
TanStack Query 무한 스크롤 사용법: useInfiniteQuery로 목록 이어 불러오기
TanStack Query v5에서 무한 스크롤을 볼 때 먼저 잡아야 할 기준 무한 스크롤은 화면 아래에 닿으면 다음 데이터를 가져오는 기능처럼 보이지만, 실제 구현에서 먼저 흔들리는 부분은 스크롤 감지가 아니라 다음 요청에 넘길 값입니다. 이 글은 TanStack Q…
더 읽기
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 리렌더링 문제는 변경 감지 기준부터 봐야 합니다 Zustand에서 store 값을 바꿨는데 화면이 그대로라면 먼저 “값이 바뀌었는가”와 “컴포넌트가 구독한 값이 바뀐 것으로 비교되었는가”를 나눠 봐야 합니다. 객체나 배열을 직접 수정하면 내부 값은 달라져…
더 읽기
Zustand action 사용법: 상태 변경 로직을 store로 분리하기
이 글에서 정리하는 내용 Zustand에서 action은 별도의 action 객체를 만드는 절차가 아니라, store 안에 상태 변경 규칙을 함수로 모아두는 방식입니다. 필터 상태 예시를 기준으로 컴포넌트에 흩어진 변경 로직을 action으로 옮기는 기준을 정리합니다.…
더 읽기