swr 사용법에 대해 질문있습니다 ㅎㅎㅎ

const fetcher = (url) => axios.get(url, {withCredentials: true }).then( (result) => result.data)

const Profile = () => {

  const { me } = useSelector((state) => state.user);

  const [followersLimit, setFollowersLimit] = useState(3)
  const [followingsLimit, setFollowingsLimit] = useState(3)

  const { data: followersData, error: followersError } = useSWR(`http://localhost:3065/user/followers?limit=${followersLimit}`, fetcher)
  const { data: followingsData, error: followingsError } = useSWR(`http://localhost:3065/user/followings?limit=${followingsLimit}`, fetcher)

  // useEffect(() => {
  //   dispatch({
  //     type: LOAD_FOLLOWERS_REQUEST,
  //   });
  //   dispatch({
  //     type: LOAD_FOLLOWINGS_REQUEST,
  //   });
  // }, []);

  useEffect(() => {
    if (!(me && me.id)) {
      Router.push('/');
    }
  }, [me && me.id]);

swr 사용하는 강의를 봤는데 너무 신기하더라고요 ㅎㅎ

reducer, saga를 작성안해도 되는것처럼 보이는데... 코드가 엄청 짧아지겠네요.

다름이 아니라 기존 방법인

useEffect를 사용하면 처음 페이지가 랜더링할때 자동으로 액션을 디스패치해줬었는데

swr을 사용하면 useEffect같은거 사용안해도 처음 페이지가 랜더링될때 자동으로 실행되는건가요?

useEffect에서 마지막 매개변수인 빈 배열에 특정 요소를 넣어주거나 return을 작성하면

componentDidMount였나 componentWillUnmount 같은 효과를 낼 수 있다고 기억하고있는데

swr에서도 같은 효과를 적용할 수 있는지 알 수 있을까요 ㅠㅠ

인프런 커뮤니티 질문&답변