[JS/React-Query] 1. useQuery
·
🖥️ Front-End/React
공통 발표회까지 드디어 끝 ㅜSSAFY 2학기 공통 프로젝트의 주제는 스마트 결혼준비 플래너같은 데이터(일정, 완료상태)를 한 페이지의 여러 컴포넌트(캘린더, 남은 일정, 다음 일정)에서 공유했음axios만을 사용해서 데이터를 요청했다면, 매 컴포넌트마다 불필요하게 동일한 요청을 보냈을 것(store에 저장하기에는 데이터 양이 많아질 수도 있고, 내 기준 변경이 많은 데이터라고 생각하여 store에 저장하지 않았음)React-Query의 useQuery를 사용시 불필요한 여러 번의 네트워크 전송을 막을 수 있을 것이라고 생각, 일정 호출에서 useQuery를 사용(신부 혹은 신랑이 배우자의 아이디를 등록하면 일정이 공유되어 같은 데이터를 수정하기에, staleTime은 따로 설정하지 않았음) 1.0 us..
[JS/Zustand] 1. Zustand 주요 함수 정리
·
🖥️ Front-End/React
React 18.2 + Vite 환경에서 작성되었습니다. SSAFY 공통프로젝트에서 전역 상태관리툴로 Redux대신 Zustand를 사용하기로 결정했다.실습코치님께 여쭤봤던 다른 팀 친구가 6인 정도 규모의 프로젝트에서는 더 가벼운 Zustand사용을 추천받았다고 알려줬기 때문..Redux는 아무래도 더 큰 엔터프라이즈급 툴인 모양임..방학 동안 공부했던 Redux를 내려놓고 다시 Zustand에 대해 공부하며 주요 함수에 대해 정리했다.Redux보다 훨씬 작고 가볍고, 짧은 Hook형식의 코드를 보며 왜 Zustand를 사용하는지 이해했음0. Installnpm install zustand1. CreateStore 생성 함수 현재 state와 setter를 저장할 store를 생성합니다.import {..