DO MY BEST

Revalidate

서버로 요청을 보내서 데이터를 다시 가져오는것

예)

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

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

💡 revalidate는 서버에 요청을 보내서 데이터를 가져오는 것이다. 그리고 data에 그 정보를 넣는다. 그 컴포넌트가 실행 될 때는 data는 false가 되면서 null이 된다. 데이터 수정 후 바로 서버에 revalidate 요청을 보내면 된다.

Mutate

서버에 요청을 안보내고 데이터를 수정하는 것

예)

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

axios
    .post(
      …
    )
    .then((response :AxiosResponse<any>) => {
        mutate(response.data, false);
    })
    .catch((error) => {
        …
    });

로그인을 하면 응답이 오고, 그 응답의 데이터인 response.data에 내 정보가 들어있다. 

이 정보를 mutate(response.data, false)로 data에 넣어버린다. 이렇게 되면 요청을 안보내도 된다. 

두 번째 매개변수에 false는 무엇을 의미하냐면 mutate가 데이터를 수정했다가 나중에는 데이터가 정말로 이렇게 바뀐게 맞는지 서버에 점검하는데, 

그것이 shouldRevalidate라는 것이다. default값이 true인데 false로 설정해두면 서버요청을 안한다.

Optimistic UI  -  페이스북을 예로 들면 좋아요 눌렀을 때 바로 좋아요가 반영되어 보이는 기능

• 먼저 성공한다고 생각하고 먼저 수정한 데이터와 서버에 있는 데이터가 일치하는지 점검을 하는 것 (만약 실패했으면 서버에 있는 데이터 그대로 반영) 

※ shouldRevalidate: true 여야지만 Optimistic UI가 가능하다.

Pessimistic UI

• 먼저 실패한다고 생각하고 무조건 서버 요청을 보낸다음 요청 성공을 했으면 데이터 수정을 하는 것

※ 아무 설정 없이 기본적으로 Pessimistic UI 이다.

a

<a href="/login">로그인 하러가기</a>

 📌  새로고침 되어버린다. 화면 깜빡임 발생함.

Link

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

 📌   화면만 바꿔주므로 싱글페이지 어플리케이션에 용이하므로 대체방안으로 사용할 수 있다. 화면 깜빡임 발생 하지 않음.

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를 사용하면된다.