[React] React Hook - 훅 정리 (작성중)

jhkim·2023년 10월 19일
0

용어 정리

  • 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


[참고링크]

https://fathory.tistory.com/155

0개의 댓글