Zustand React 리렌더링 기준: 상태 변경이 화면에 반영되는 흐름 이해하기
이 글에서 정리하는 내용 Zustand를 사용할 때 리렌더링을 판단하는 기준을 React 렌더링 흐름과 연결해서 정리합니다. store 전체가 바뀌었는지가 아니라, 컴포넌트가 어떤 값을 선택해서 구독하고 있는지가 핵심입니다. React 리렌더링부터 확인해야 하는 이유 Zustand에서 상태를 읽는다는 의미 store …
더 읽기React
React 컴포넌트, 상태 관리, Zustand, Hook, 렌더링 문제처럼 프론트엔드 실무에서 자주 쓰는 React 개발 흐름을 정리한 카테고리입니다.
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 상태를 바꿨는데 리렌더링되지 않는 이유에서 먼저 확인할 것 Zustand 상태를 바꿨는데 리렌더링되지 않는 이유는 단순히 한 줄 코드를 바꾸는 문제로 끝나지 않습니다. Zustand store 값은 바뀐 것 같은데 컴포넌트가 다시 그려지지 않는 상황을…
더 읽기
Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리
이 글에서 정리하는 내용 Radix UI와 shadcn/ui를 경쟁 라이브러리처럼 오해해 선택 기준이 흐려지는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소개가 아니라 오류가 난 순간 바로 …
더 읽기
Next.js Server Actions와 React Hook Form 같이 쓰는 법: form action과 validation 기준
이 글에서 정리하는 내용 Server Actions와 React Hook Form을 같이 쓸 때 클라이언트 검증과 서버 검증 역할이 겹쳐 보이는 상황을 기준으로 원인을 좁히고, 실제 프로젝트에서 어떤 설정과 코드 구조를 확인해야 하는지 정리합니다. 단순 개념 소…
더 읽기
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 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 리렌더링 문제는 변경 감지 기준부터 봐야 합니다 Zustand에서 store 값을 바꿨는데 화면이 그대로라면 먼저 “값이 바뀌었는가”와 “컴포넌트가 구독한 값이 바뀐 것으로 비교되었는가”를 나눠 봐야 합니다. 객체나 배열을 직접 수정하면 내부 값은 달라져…
더 읽기
Zustand 사용 기준: React 상태 관리가 복잡해질 때 선택하기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기
Zustand 개념 정리: React 상태 관리를 가볍게 나누는 기준
이 글에서 정리하는 내용 Zustand를 처음 공부할 때는 문법보다 상태를 어디에 둘지부터 잡아야 합니다. 컴포넌트 내부 state, Context API, Redux Toolkit과 비교하면서 Zustand가 어떤 문제를 줄이고, 어떤 상태를 맡기면 되는지 기준을 정…
더 읽기