용어 정리
- optimistic update:
React Hooks
useState
- 함수형 컴포넌트에서 상태를 가질 수 있음 - 컴포넌트 내에서 상태 변수를 선언하고 업데이트할 수 있음
- 초기값을 지정해야 함
- 동작 원리
- 상태 변수가 업데이트되면 새로운 상태와 이전 상태를 비교하여, 렌더링이 다시 필요하다면 가상 DOM을 리액트가 업데이트하고 실제 DOM에 필요한 변경 사항을 적용함
- 고려 사항
- 루프나 조건문 내에서 useState를 사용하지 않도록 함
- useEffect훅을 사용하여 상태를 업데이트
return- 현재 상태 값을 포함하는 배열과 상태를 업데이트하는 함수를 반환함
useMutation
- 데이터를 생성 업데이트 삭제시에 사용
- optimistic update기능 사용시에 좋음
options- mutationFn: QueryFn처럼 Promise를 리턴하는 비동기 함수
- onMutate
- mutation함수가 실행되기 전에 실행, mutation함수가 받을 동일한 변수가 전달됨. optimistic update사용시 유용함
** optimistic update: 낙관적 업데이트. 어차피 업데이트한다는 믿음을 가지고 UI에서 미리 업데이트함
return- mutate: mutationFn에서는 어떻게 동작할지 정의만 하고, mutate함수를 통해 나중에 실행
useQuery
return useQuery({
queryFn: () => LocationService.getAllLocations({ latitude, longitude }),
queryKey: ['locations'],
enabled: !!longitude && !!latitude,
onError: () => alert('위치 정보를 불러오는데 실패했습니다.'),
});- 데이터를 서버로부터 조회할 때 사용
- query key
- useQuery마다 부여되는 고유 key값
- React Query가 query 캐싱을 관리할 수 있도록 도와줌
- 동일한 useQuery를 사용하면 querykey를 가지고 캐싱된 결과값을 그대로 가져와서 사용한다
- queryFn
- 프로미스 처리가 이루어지는 함수
- axios를 이용해 서버에 api를 요청한다고 보면 됨
useReducer
[참고링크]
