TanStack Query 무한 스크롤 사용법: useInfiniteQuery로 목록 이어 불러오기
TanStack Query v5에서 무한 스크롤을 볼 때 먼저 잡아야 할 기준 무한 스크롤은 화면 아래에 닿으면 다음 데이터를 가져오는 기능처럼 보이지만, 실제 구현에서 먼저 흔들리는 부분은 스크롤 감지가 아니라 다음 요청에 넘길 값입니다. 이 글은 TanStack Q…
더 읽기상태관리·데이터
라이브러리는 특정 기능을 효율적으로 사용하기 위해 필요한 순간에 호출하여 사용하는 코드 모음입니다. 프로젝트의 전체 구조나 흐름을 강제하지 않으며, 개발자가 직접 제어권을 가지고 선택적으로 활용할 수 있습니다.
Zustand persist 사용법: 새로고침 후 상태 저장하기
이 글에서 정리하는 내용 Zustand의 persist 미들웨어로 새로고침 후에도 상태를 유지하는 방법을 정리합니다. 코드 사용법 자체보다 어떤 상태를 브라우저 저장소에 남겨도 되는지, 어떤 상태는 매번 초기화하는 편이 나은지에 초점을 맞춥니다. 상태는 store에…
더 읽기
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 리렌더링 문제는 변경 감지 기준부터 봐야 합니다 Zustand에서 store 값을 바꿨는데 화면이 그대로라면 먼저 “값이 바뀌었는가”와 “컴포넌트가 구독한 값이 바뀐 것으로 비교되었는가”를 나눠 봐야 합니다. 객체나 배열을 직접 수정하면 내부 값은 달라져…
더 읽기
Zustand action 사용법: 상태 변경 로직을 store로 분리하기
이 글에서 정리하는 내용 Zustand에서 action은 별도의 action 객체를 만드는 절차가 아니라, store 안에 상태 변경 규칙을 함수로 모아두는 방식입니다. 필터 상태 예시를 기준으로 컴포넌트에 흩어진 변경 로직을 action으로 옮기는 기준을 정리합니다.…
더 읽기
Zustand state 사용법: 값 읽기와 변경 흐름 익히기
이 글에서 정리하는 내용 Zustand store를 만든 뒤 컴포넌트에서 state를 읽고 action으로 변경하는 흐름을 정리합니다. 단순히 값을 가져오는 문법보다, 컴포넌트가 어떤 값에 의존하는지 좁히고 변경 규칙을 store 안에 모으는 기준을 중심으로 봅니다. …
더 읽기
Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기
이번 단계에서 정리하는 내용 Zustand를 React 프로젝트에 설치하고, 컴포넌트 밖에 기본 Store를 만든 뒤 필요한 상태와 액션만 꺼내 쓰는 흐름을 정리합니다. 설치 명령어보다 더 오래 남겨야 할 기준은 안에서 상태와 상태 변경 함수를 어떤 책임으로 묶을지입니…
더 읽기
Zustand 사용 기준: React 상태 관리가 복잡해질 때 선택하기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기
Zustand 개념 정리: React 상태 관리를 가볍게 나누는 기준
이 글에서 정리하는 내용 Zustand를 처음 공부할 때는 문법보다 상태를 어디에 둘지부터 잡아야 합니다. 컴포넌트 내부 state, Context API, Redux Toolkit과 비교하면서 Zustand가 어떤 문제를 줄이고, 어떤 상태를 맡기면 되는지 기준을 정…
더 읽기
Zustand 학습 순서: store, action, selector, persist까지
Zustand 글은 여러 개 있지만 각 글을 어떤 순서로 읽어야 하는지 정리되지 않으면 store와 action, selector가 따로 노는 개념처럼 보입니다. Zustand는 store 하나부터 시작하면 덜 헷갈립니다 Zustand를 처음 볼 때는 전역 상태 …
더 읽기
TanStack Query staleTime gcTime 차이: 캐시 시간 기준
이 글에서 정리하는 내용 TanStack Query v5 기준으로 staleTime과 gcTime의 차이를 정리합니다. 캐시가 남아 있는데도 요청이 다시 나가는 이유, v4의 cacheTime이 v5에서 gcTime으로 바뀐 이유, 실제 React 화면에서 두 옵션을 …
더 읽기