DO MY BEST

const Workspace: FC = ({children}) => {

	...
    
    return (
        <div>
            <button onClick={onLogout}>로그아웃</button>
            {children}
        </div>
    )
}

💡 {children}은 밑에처럼 Workspace 컴포넌트로 감싸면 그 안에 있는 내용들이 {children}이 된다

const Channel = () => {
    return (
        <Workspace>
            <div>children 안에 들어간다</div>;
        </Workspace>
    );
};

※ 리엑트에 있는 FC라는 타입 안에 children이 들어있다. 만약 children을 쓰지 않는 component가 있으면 VFC를 사용하면된다.

📎  swr을 잘못 사용하면 패킷들을 마구마구 백앤드로 보내서 셀프 DDOS공격을 하는셈이 된다. 이를 막기 위해서 설정을 할 수 있다.

내가 원할 때 swr 호출하기

revalidate 함수

axios
    .post(
      ...
    )
    .then(() => {
        revalidate();
    })
    .catch((error) => {
        ...
    });

성공 했을 때 revalidate 호출 해주면 fetcher가 실행된다. 원래 내 정보가 들어있는 data는 revalidate가 실행되면 false가 된다.

swr 호출 주기를 늘리기

dedupingInterval

focusThrottleInterval

loadingTimeout

errorRetryInterval

errorRetryCount   

💡 swr은 요청을 보내서 받아온 데이터를 저장해둔다. post를 쓰지못하는 건아니지만 보통은 get 요청에 대한 데이터를 swr이 저장을 해준다.

이 때, 로그인을 할 때는 post요청이고 데이터를 돌려주는데 나는 swr을 쓰고 싶은 상황이다. 그러나 swr은 get요청만 되는데 어떻게 할까?

답: get 요청을 한번 더 보내면 된다. 내가 로그인을 했으니 내 정보갖다 줘라는요청을 서버에 보내주는 것이다.

🔨  설치 및 사용

터미널에 "npm i swr"

import useSWR from "swr";

📎  보통 형식은 이렇다

const {data, error} = useSWR(‘주소’, {config: withCredentials: true,}, 처리방식);

useSWR은 주소를 처리방식으로 넘겨준다. 이때주소는 처리방식에 매개변수로 넘어간다.
ex) const {data, error} = useSWR('http://localhost:3095/api/users', fetcher);


위의 예시의 fetcher를 따로 구현을 해보면 아래와 같다

const fetcher = (url) = axios.get(url, {config: withCredentials: true,}).then((response :AxiosResponse<any>) => response.data);

매개변수(url)로 주소가 넘어오면 그 주소로 axios.get요청을 보낸다. 그것에 대한 응답에서 데이터를 꺼내서 돌려준다. 그리고 그 데이터는 const{data, error}에 data에 들어가고 error는 서버에러 등이들어간다.

※ const fetcher = (url) = axios.get(url, {config: withCredentials: true,}).then((response :AxiosResponse<any>) => response);이면 const{response} 로 해야 한다.

※ 그리고 withCredentials: true를 해주어야 쿠키요청 응답이가능해진다. (백앤드와프런트 앤드의주소가 다를 때 필수 설정)

최종적으로

장점

• 로딩 상태도 알 수 있다. 만약 데이터가 존재하지 않으면 로딩 중이라는 뜻이다.
• 다른 탭에 갔다가 오면 자동으로 요청을 보내서 항상 최신 화면으로 유지시켜준다.