Link와 swr

Link

import { Link } from 'react-router-dom';

<Link to="/login">로그인 하러가기</Link>

이렇게 Link를 써야 SPA가 유지된다.

 

swr

swr은 원격데이터 fetch를 위한 커스텀 훅 npm 모듈이다. 

useSWR(Key, Fetch)

Fetch 함수를 이용해 key라는 주소에서 가져오는 데이터를 전역적으로 관리할 수 있다. 즉 swr은 데이터를 가져오기 위한 리액트 훅이다.

 

-swr 활용 방법

swr은 비동기랑 get 요청에 얽매이지 않고 fetherPost 이렇게 만들어서 post 요청도 사용할 수 있다. 결국 swr로 전역 데이터를 관리할 수 있다는게 중요하다. 즉 전역 스토리지 역할을 할 수 있다. swr을 잘 활용하려면 백엔드에서 오는 데이터를 그대로 사용하는 것이 아니라 fether 함수를 활용해서 가공해서 사용하면 된다. 예를 들면 개수만 받아 올 수 있다. 

웹 페이지에서 로그인을 했을 때 로그인이 되어있는지 안되어 있는지 알기 위해서는 전역 데이터를 활용해야 한다. 그 방법으로는 swr도 있고 Contect API를 사용하는 방법이 있다.

 

fether을 2개 사용하고 싶을 때

  const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fether, {
    dedupingInterval: 2000,
  });
  const { data, error, mutate } = useSWR('http://localhost:3095/api/users#123', fether2, {
    dedupingInterval: 2000,
  });

두번째 코드처럼 url 뒤에 '#123' 같은 문자를 붙이면 다른 fether을 동시에 사용할 수 있다.

 

fetcher 함수

import axios from 'axios';

const fether = (url) => axios.get(url).then((response) => response.data);

export default fether;

response.data를 리턴해준다.

 

  const { data, error } = useSWR('http://localhost:3095/api/users', fetcher);

첫번째 인자에 주소를 적어주고, 두번째 인자엔 fetcher인데 이것은 앞에 적은 주소를 어떻게 처리할지를 적어주면 된다.

앞에 data는 위에 있는 fetcher 함수가 리턴하는 response.data가 된다. 에러는 error에 저장된다. 그리고 swr이 좋은점이 로딩 상태를 알 수 있는데 data가 없으면 로딩 상태이다.

 

쿠키가 생성되지 않는 에러 해결법

프론트 서버와 백 서버의 도메인이 다르면 백엔드에서 프론트로 쿠키 생성을 할수도 없고 프론트에서 백으로 쿠키를 보내줄 수도 없다.

따라서 axios에다가 { withCredentials: true }를 설정해야한다.

쿠키는 백엔드에서 생성해서 브라우저가 기억하도록 만든다. 그리고 프론트에서는 쿠키를 기억하고 매 요청마다 백엔드로 보내준다.

 

• get 요청

axios.get(url, { withCredentials: true }).then((response)

2번째 자리에 넣어야한다.

 

• post 요청

axios.post('/api/users/login', { email, password }, { withCredentials: true })

3번째 자리에 넣어야한다.

 

그러면 이렇게 쿠키가 생성된다.

 

swr의 API 컨트롤하기

swr은 주기적으로 API를 요청한다. 그래서 이것을 직접 컨트롤 해야 한다. 

const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher, { 
dedupingInterval: 100000 
});

  const onSubmit = useCallback(
    (e: any) => {
      axios
        .post('/api/users/login', { email, password }, { withCredentials: true })
        .then((response) => {
          mutate(response.data, false);
        })
        .catch((error) => {
          setLogInError(error.response?.data?.statusCode === 401);
        });
    },
    [email, password],
  );

1. 로그인하고 내 정보를 저장하고 메인 페이지에 넘어가야 한다. 그러기 위해서는 api/users를 호출해야 한다.

개발자가 원할 때 API 실행을 해줄 수 있는 mutate 함수가 있다. 이것은 then에다가 넣어주면 즉 로그인에 성공했을 때 fetcher가 실행된다. 따라서 로그인하면 API 호출이된다. 

 

2. swr이 API 요청을 너무 빈번하게 보내면 서버에 무리가 간다. 그렇기에 주기적으로 API 호출하는 것을 막아야한다.

로그인하고 API는 주기적으로 호출은 되지만 dedupingInterval 기간 내에는 캐시에서 불러온다.

https://swr.vercel.app/ko/docs/options

API 옵션 – SWR

더 자세한 옵션은 공식 문서를 참고하면 될 것 같다.