[WIL] ReactQuery, Next.js, 타입스크립트, 회원 인증 및 JWT (24.02.5 - 9)

axios vs fetch

axios는 response.data
fetch는 response.json()으로 접근?

타입스크립트

interface와 type의 차이

interface는 객체를 만들어줄수있다.
type 은 별칭을 지정할 수 있다.

interface ProfileProps {
  name: string;
  nickname: string;
  age: number;
  gender: "male" | "female";
}

function Profile({ name, nickname, age, gender }: ProfileProps) {
  return (
    <div>
      <div>{name}</div>
      <div>{nickname}</div>
      <div>{age}</div>
      <div>{gender}</div>
    </div>
  );
}

export default Profile;

제네릭 추론

유틸리티 타입

export function getSomeValueAndReturnTypeofSomeValue<T>(someValue: T): T {
  return someValue;
}

// const returnValue = getSomeValueAndReturnTypeofSomeValue<string>("hello");
==> 이렇게 안해도
const returnValue = getSomeValueAndReturnTypeofSomeValue("hello");
제네릭으로 선언을 해줬기때문에 ts가 추론으로 타입을 알수있다.? 

Next.js

React Query

클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어진 전역상태관리 라이브러리

useQuery

useQuery({})
필수 인자가 1개이다.(최소한 1개의 매개변수가 함수 호출시 전달되어야한다!)
=> 이 매개변수는 일반적으로 {} 옵션객체!

이 옵션객체의 속성 중 2가지는 queryKey와 queryFn이 있는데,
queryKey는 쿼리의 식별을 위한 키(key)이고, queryFn은 쿼리를 실행하는 함수이다.

queryKey는 배열 타입으로, 첫번째 요소는 쿼리의 식별을 위한 식별자(주로 "문자열")이고, 두번째 요소는 해당 쿼리에 필요한 부가적인 메타데이터 정보객체이다!

💡 리액트 쿼리의 장점
1. 중복 요청 제어
useQuery를 사용할시 여러 컴포넌트에서 동일한 데이터를 중복 요청할때 이 요청들을 하나로 수합하여 자동으로 하나의 요청으로 만든다는 것이다.
2. 쿼리 키에 대한 캐싱
쿼리 결과를 캐싱하여 성능을 향상 시킨다. => 같은 쿼리키를 가진 요청이 온다면, 새로운 요청을 보내지 않고 캐시된 데이터를 반환. => 서버 부하 줄인다.
3. 캐시된 데이터를 메모리에 저장

useMutation

• useMutation - 서버의 데이터를 변경할때 사용. e.g. POST, PUT, DELETE 요청
• useQuery - 서버의 데이터 패치할때 사용. e.g. GET

useMutation 훅은 첫번째 인자로 객체를 받는다. => mutationFn이라는 속성이 있어야한다. 서버의 데이터를 변경하는 작업이므로 key는 따로 필요없다!

// 서버의 데이터를 변경할때 이런식으로 사용한다.
// mutationFn 속성은 서버에 데이터를 변경하는 비동기 함수를 가리키는데
// 여기서는 로그인을 위한 API요청 함수인 logIn함수를 넣는다.
const { mutateAsync } = useMutation({ mutationFn: API.auth.logIn })

useMutation의 트리거, mutate

mutate는 useMutation을 이용해 작성한 내용들이 실행될 수 있도록 도와주는 trigger역할을 한다.

mutate와 mutateAsync
useMutation은 mutate와 mutateAsync 함수를 제공한다.

mutate는 반환 값이 없고, 콜백을 통해 데이터나 오류에 액세스 가능하다.
mutateAsync는 Promise를 반환한다. 그리고 오류를 직접 처리해야한다.

JWT