작성은 했는데 정리를 못했습니다. 내일 같이 정리하여 작성하겠습니다
React Query
- query invalidation을 통해 현재서버의 데이터를 실시간 반영해주어, 이전에 받았던 데이터를 무효화 하고, 현재 들어가 있는 데이터를 가져온다.
음..redux로 전역관리를 안하고 , db에서 데이터를 바로 가져오겠다는 말?
그리고 react query 안에
is loading , is error , data가 있어서 ,
만약 데이터를 가져오는 중이면 is loading이 true 가 된다는 점
app.jsx 에서 const queryClient = new QueryClient(); 만들고
그 아래 있는 컴포넌트 들에서는 데이터를 넣으려고 할때
const queryClinet =useQueryClient() 를 통해 app.jsx 에서 만들어 놓은 new QueryClient를 하나의 흐름으로 이용하겠다는 의미
mutation을 이용해서 데이터를 생성,수정 등을 할 수 있는데
여기서 db server와 client 간의 async가 맞지 않아 db의 실시간 데이터를 반영하지 못한다. 이를 해결하기위해 query invalidation
const mutaion = useMutation(addTodo,{
onSuccess :()=>{
queryClient.invalidateQueries('todo')
//여기서 todo는 우리가 db로 부터 데이터를 받아오는 함수의 key값을 읨
//그래서 이 받아오는 것을 "무효화"시키고 , 새롭게 다시 refresh 하겠다는 의미이다
}
}React Query 소화하기!
stale-while-revalidate 전략 이해
get todos 실행하면 , query context에서 데이터를 cache 한 뒤에 그 다음
const {data}=useQuery 이렇게 data에 ㅏㄱ져오낟
그리고 처음에 값을 가져오는 getTodo를 실행하기 전 아무것도 없느 ㄴ상태에서 렌더링 한뒤 , 데이터를 서버에서 가져온 뒤 리 랜더링하여 데이터를 보여준다
화면에 보여주기 위해서는 context에 cache 되어있는 데이터를 보여주고, 서버의 데이터를 추가,변경 하였더라도 ,context안의 cache에 그것이 반영이 되지 않으면 우리는 화면상에서 변화를 느낄수없다. 즉 랜더링은 context cache의 상태에 의해 일어남
cache data안에는 lifecycle 생명주기가 존재
fresh 상태라면 서버에게 요청을 보내지 않는다
isLoading 은 cach Context에 아무것도 없으면 발생: 새로운 케시 데이터를 서버에서 받고 있는지 여부에 대한 것
is Fetching 은 cach context 안에 데이터 유무에 대해 관심이 없고 , 그저 query function이 실행되어 서버로 부터 무엇을 받아 오고 있늦지 없는지에 대한 관심만 있다
isLoading :false => 기존의 데이터에서 새로운 데이터를 받아 오지 않음
isFetching : true =>fetching query(예= gettodos)가 실행된 것을 확인
lazy coding 혹은 선택적 함수를 실행하기 위해서
enabled 속성 이용
undefined은 false 형 값이기에 !undefined= true
false로 바꾸고 싶다면 !!undefined 할것 ! = false
optionalChaingin은 해당객체에 값이 있냐 없냐를 true ,undefined으로 리턴
if 문은 괄호안에 내부적으로 boolean type로 설정해주는 자동완성 기능이 있음
usenavigate를 쓰면
아래 리턴문이 다 렌더링 ㅗ되어서 이렇ㄱ ㅔ컴포넌트로 사용한다
