Typescript & React/useQuery (3) 썸네일형 리스트형 useQuery 사용 시 반환 값이 undefined 에러 아래와 같이 작성했다. const {data:me} = useQuery( ["me2", "Member"], () => getMyinfo(ckToken!) );그러나 me의 값이 undefined 이 나온다. 이렇게 되면 me?.속성 이런 방법으로 써야한다. 문제는 값을 못 받아올 때 입력 값이 필요 할 때 발생 ( 정보 등록의 경우 ) 따라서 해결방법은 non-null assertion operator를 사용하여user가 undefined값이 아니고 null이 아닐 경우 sessionStorage에 넣고 사용한다. export async function getMyinfo(token:string) { try { const response = await fetch(`${BASE_PATH}/.. refetch를 통해 삭제 구현 우선 useQuery 반환 값을 확인해보자. data, isLoading은 이 전 글을 보기를 권장드립니다. 오늘은 refetch 함수를 통해 delete 후 캐싱을 통해 바로 삭제되는 것을 구현해본다. 아래의 로직에 대해 설명 1. 삭제 요청 -> 서버에서 미리 담기 목록 중에서 해당 id를 찾아 삭제 2. 정상 삭제 -> response.ok가 true를 반환하면 refetch 실행하여 동적으로 화면에서 해당 미리 담기 제품을 삭제하는 효과를 낼 수 있다. export const StoredGoods = () => { const addressYo = useRecoilValue(storedGoodsAddress) const token = useRecoilValue(tokenState); const me.. useQuery를 사용해보자 일반적으로 fetch를 사용하다 useQuery를 사용하면 무엇이 더 좋은지 궁금해졌다. 장점을 보니 너무나 좋은 것! 리팩토링이 필요하다! 일단 데이터를 가져오는 데 필요한 boilerplate 코드를 최소화 useQuery는 데이터를 자동으로 캐싱하여 같은 요청이 반복되는 경우 서버에 요청을 보내지 않고 이전에 캐시된 데이터를 반환 (개인적으로 가장 굳 )useQuery는 데이터 로딩 중, 성공 시, 실패 시와 같은 다양한 상태를 쉽게 관리할 수 있습니다. 이를 통해 UI를 다양한 상태에 따라 적절하게 업데이트 데이터 업데이트 감지: useQuery는 데이터가 업데이트될 때 자동으로 다시 렌더링되므로 UI를 최신 상태로 유지 1. 설치npm i react-query 2. App.tsx 에서 쿼리 .. 이전 1 다음