발견한 에러questrip에서 맛집을 추천하는 페이지인 Recommend 페이지를 개발하고 있다.이 페이지에서는 서버로부터 10개 이상의 추천 데이터를 받아오지만 유저에게는 1개씩만 데이터를 보여준다.유저가 이 맛집을 선호하는지, 비선호하는지, 관심 없는지 무조건 1개 이상의 상태를 취해야만 계속 추천 데이터를 볼 수 있다. 즉 선호(Accepted), 비선호(Denied), 관심 없음(Kept) 3가지 중 1개의 상태를 취하면 그 상태를 post 해 서버에 현황을 보내주고, 추천 데이터는 1개가 줄어든 상태로 다시 받아와야 한다.const response = await axiosInstance.post( `/api/v1/recommend`, { placeId: placeId, ..
낙관적 업데이트낙관적 업데이트란 UX를 위해 빠르게 UI를 갱신하거나 업데이트하는 방법 중 하나로, 어떤 작업에 대한 응답을 서버로부터 받기 전에 해당 응답이 성공적으로 돌아올 것이라고 가정(낙관적)해서 먼저 업데이트를 진행한다. 만약 실패한다면 실행했던 낙관적 업데이트를 롤백하면 된다. 여태까지 작업했던 웹 애플리케이션은 이벤트를 CRUD하는 구조였는데, 이벤트의 제목을 수정하면 새로고침을 해야만 수정된 내용이 반영되는 불편함이 있다. 우리는 수정하고 [확인]버튼을 누르면 바로 수정된 내용이 반영되어 보여지길 원한다. 이 때 onSuccess로 쿼리를 무효화 시켜서 구현하려고 하면 변형이 완료될 때까지 기다려야 하는 불편함이 있다. 또 이벤트의 제목이 빈 문자열이면 에러가 뜨기 때문에 이 부분을 고려해..
useMutationTanStack Query로 데이터를 가져오는 것 뿐만 아니라 새 이벤트 생성같이 데이터를 전송하는 것도 가능하다.폼을 제출해 데이터를 전송하는 예제를 통해서 데이터를 전송하고 수집해보자! 먼저 아래와 같은 api를 http.js에 추가해준다.export async function createNewEvent(eventData) { const response = await fetch(`http://localhost:3000/events`, { method: 'POST', body: JSON.stringify(eventData), headers: { 'Content-Type': 'application/json', }, }); if (!response.o..
동적으로 쿼리 사용하기input에 검색어를 입력하고 검색하면 해당되는 데이터를 받아오려고 한다.이전 게시물에서 분리해두었던 http.js의 url에 쿼리 파라미터를 추가해 동적인 쿼리를 만들어보자. export default function FindEventSection() { const searchElement = useRef(); function handleSubmit(event) { event.preventDefault(); } return ( Find your next event! Search Please enter a search term and to find events..
useQuery 사용하기npm install @tanstack/react-queryyarn add @tanstack/react-query 먼저 TanStack Query 사용을 위해 설치를 해준다. 강의를 따라가면서 기존 코드에서 useQuery를 도입해보자. NewEventsSection이라는 컴포넌트에는 커스텀 상태 관리와 useEffect hook이 있다.컴포넌트가 마운트 될 때마다 fetchEvents라는 함수가 실행된다. 이 함수가 실행되면서 setIsLoading(true)가 되고, response 또는 error를 받아 그에 맞는 content를 보여준다.export default function NewEventsSection() { const [data, setData] = useStat..
들어가기(v4부터 다른 프레임워크도 지원함에 따라 더 이상 React Query가 아니라 TanStack Query가 되었지만 여전히 많은 유저들이 React Query라고 하는 것 같다. 나도 그게 더 손에 붙지만 공식 문서에 TanStack Query로 명명되어 있으므로 앞으로는 TanStack Query라고 하겠다.) 최근 '좋은 상태 관리'에 대한 고민을 하고 있다. 이전에 작업한 곰곰 다이어리를 리팩토링하려고 하는데 상태가 매우 더러워 손을 댈 엄두를 내지 못하고 있기 때문이다. 클라이언트에서 쓰는 상태와 서버 데이터를 받는 상태들이 복잡하게 섞여 있는 게 가장 큰 이유인데, 이걸 어떻게 개선하면 좋을지 알아보다 TanStack Query를 적용해보면 좋겠다는 생각을 하게 됐다. 상태란?먼저 맨..
