맛집 앱 만들기 프로젝트 Part13 React Query 사용 및 API추가하기

React Query란

리액트 쿼리는 서버 데이터를 가져오고 캐싱하고 동기화하면 업데이트해주는 라이브러리이다

React Query 설치

(프론트 프로젝트 폴더에서)

npm i @tanstack/react-query

React Query에서 사용할 데이터 타입들을 미리 지정해두자

[matzip/front/src/types/domain.ts]

type MarkerColor = 'RED' | 'YELLOW' | 'GREEN' | 'BLUE' | 'PURPLE';

type Category = {
  [key in MarkerColor]: string;
};

interface ImageUri {
  id?: number;
  uri: string;
}

interface Marker {
  id: number;
  latitude: number;
  longitude: number;
  color: MarkerColor;
  score: number;
}

interface Post extends Marker {
  title: string;
  address: string;
  date: Date | string;
  description: string;
}

interface Profile {
  id: number;
  email: string;
  nickname: string | null;
  imageUri: string | null;
  kakaoImageUri: string | null;
  loginType: 'email' | 'kakao' | 'apple';
}
export type {MarkerColor, Category, ImageUri, Marker, Post, Profile};

API전용 폴더도 생성하여 API호출 관련 소스들은 해당 폴더에서 관리하도록하자

[matzip/front/src/api/auth.ts]

해당 파일은 API를 요청하는 함수를 담아둔 파일로 로그인,회원가입,데이터조회 등 API함수들을 담아두도록한다

import axios from 'axios';
import axiosInstance from './axios';
import {Category, Profile} from '../types/domain';
import {getEncryptStorage} from '../utils';

type RequestUser = {
  email: string;
  password: string;
};
// 회원가입
const postSignup = async ({email, password}: RequestUser): Promise<void> => {
  try {
    console.log(`step2 PostSignup 호출됨 `);
    const {data, status} = await axiosInstance.post('/auth/signup', {
      email,
      password,
    });
    console.log(status);
    return data;
  } catch (e) {
    console.log(e);
  }
};
type ResponseToken = {
  accessToken: string;
  refreshToken: string;
};

// 로그인
const postLogin = async ({
  email,
  password,
}: RequestUser): Promise<ResponseToken> => {
  const {data} = await axiosInstance.post('/auth/signin', {
    email,
    password,
  });
  return data;
};

// 유저 정보 불러오기
type ResponseProfile = Profile & Category;
const getProfile = async (): Promise<ResponseProfile> => {
  const {data} = await axiosInstance.get('/auth/me');
  return data;
};

// 토큰 갱신 함수
const getAccessToken = async (): Promise<ResponseToken> => {
  const refreshToken = await getEncryptStorage('refreshToken');
  const {data} = await axiosInstance.get('/auth/refresh', {
    headers: {
      Authorization: `Bearer ${refreshToken}`,
    },
  });
  return data;
};

// 사용자 로그아웃함수
const logout = async () => {
  await axiosInstance.post('/auth/logout');
};
export {postSignup, postLogin, getProfile, getAccessToken, logout};
export type {RequestUser, ResponseToken, ResponseProfile};

[matzip/front/src/api/auth.ts]

import axios from 'axios';

import {Platform} from 'react-native';

// axios에서 제공하는 creact함수로 baseURL 지정이 가능하다 
const axiosInstance = axios.create({
  baseURL:
    Platform.OS === 'android'
      ? 'http://192.168.0.25:3030'
      : 'http://localhost:3030',

  withCredentials: true,
});

export default axiosInstance;