-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
swr을 쓰면 컴포넌트 랜더링 플로우가 어떻게 되나요?
21.08.23 00:27 작성 조회수 268
0
일단 프로필 컴포넌트 안에서 콘솔 로그 찍어봤는데
followersData, followingsData를 마치 await해서 받은 다음
한 번에 랜더링 되더라고요.
근데 강의 내용중에 { data, error }가 둘 다 없으면 로딩중이라 하셨는데
그럼 순서가
swr get request -> render -> swr get success -> render
이렇게 작동된다는 건가요?
답변을 작성해보세요.
1
조현영
지식공유자2021.08.23
네 원래는 로딩중, 로딩완료 이렇게 두 번 렌더링됩니다. 다만 next의 ssr이랑 같이 합쳐두었을 경우 데이터는 이미 불러온 상태이므로 로딩완료 한 번만 렌더링됩니다.
한수빈
질문자2021.08.23
profile 컴포넌트 안에서 찍었습니다.
const Profile = () => {
const { data, error } = useSWR(url, fetcher);
console.log('profile render: ', data, error);
...
return <div>프로필</div>;
}
이런식으로요
조현영
지식공유자2021.08.23
fetcher 내부에 콘솔로그를 찍고, 만약에 그 콘솔로그가 프론트 브라우저 말고도 프론트 서버에 찍힌다면 fetcher도 서버에서 실행되어서 결과가 나타난 것입니다. 서버에 없다면 브라우저에서 렌더링된 것입니다.
한수빈
질문자2021.08.23
왜 그런 건지 알아냈어요.
처음 profile 페이지로 이동하면 많이 찍히는데
그 이후에는 swr이 같은 url 에 대해서 캐싱을 해놓는 듯합니다.
근데 두 번 찍히긴 하네요. 어제 한 번 찍혔다는 건 제 착각인가 봐요.
const useSWR = (url, fetcher) => {
const [data, setData] = useState();
const [error, setError] = useState();
useEffect(() => {
fetcher(url).then(setData).catch(setError);
}, [url]);
return { data, error };
};
swr을 대충 이런 커스텀 훅으로 이해하면 될까요?
처음엔 empty data, empty error를 리턴하고
이벤트 루프가 promise가 done된 테스크를 stack에 올릴 때
setData를 실행해서 data를 갱신한 다음 profile 컴포넌트를 리랜더링하고
다시 호출된 swr은 갱신된 data를 리턴하는 식으로요.
url이 달라질 때마다 새로 가져오구요.
조현영
지식공유자2021.08.24
네 맞습니다. 저기 useEffect에 추가적으로 주기적으로 재요청한다든가의 로직이 추가되는 개념입니다. 실제 구현은 다양한 옵션들로 인해 훨씬 복잡해졌지만요.
https://github.com/vercel/swr/blob/master/src/use-swr.ts
답변 1