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

김건희

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

질문있습니다.

작성

266

질문1. 안녕하세요 제로초님 swr도 서버사이드 렌더링이 된다고 하셨잖아요??

그러면 리덕스와 사가를 통해 로드액션으로 서버사이드 렌더링 하는 것과 swr 을 통해 서버사이드 렌더링하는중 어떤게 효율적인가요? 같은 기능을 하는것 같은데 둘의 장점과 단점이 궁금합니다

질문2. Profile.js입니다

const Profile = () => {
  const [followingsLimit, setFollowingsLimit] = useState(3);
  const [followersLimit, setFollowersLimit] = useState(3);
  const { data: followingsData, error: followingError } = useSWR(`http://localhost:3065/user/followings?limit=${followingsLimit}`, fetcher);
  const { data: followersData, error: followerError } = useSWR(`http://localhost:3065/user/followers?limit=${followersLimit}`, fetcher);
  const { me } = useSelector((state) => state.user);

profile페이지로 이동하게 되면 팔로잉과 팔로워데이터가 나타납니다. 이때 데이터는 useEffect를 사용하지않고 SWR을 사용해서 불러온것인데 SWR은 기본적으로 useEffect와 같이 페이지가 마운트 될 때 알아서 데이터를 불러오는 것인가요?

useEffect와 useSWR중 어떤것이 먼저 실행되는 것인가요?

질문3. profile.js에서

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  // console.log('getServerSideProps start');
  // console.log(context.req.headers);
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type: LOAD_MY_INFO_REQUEST,
  });
  context.store.dispatch(END);
  // console.log('getServerSideProps end');
  await context.store.sagaTask.toPromise();
});

여기서 LOAD_MY_INFO_REQUEST액션을 서버사이드 렌더링 하는이유가 궁금합니다.

먼저 index.js에서 LOAD_MY_INFO_REQUEST로 서버사이드렌더링을 이미 했기 때문에 리덕스user에 me에 데이터가 이미 들어있어서 위의 코드가 없어도 데이터를 불러오기는 하더라구요?

그러면 위의 코드가 있는 이유가 궁금합니다.

❶ 리덕스user에 me에 데이터가 이미 들어있기 때문에 Profile.js 에서위의 코드는 필요가 없는건가요?

❷ 아니면 index.js에서 LOAD_MY_INFO_REQUEST 액션이 있음에도 불구하고 위의 코드가 있는건 profile은 index.js와 다른 페이지이기 때문에 다시 서버사이드 렌더링으로 액션을 주어야지 페이지가 렌더링될때 데이터를 빨리 받아오게 하기위함인가요?

둘중 어떤게 맞나요?

nodejs express react redux Next.js

답변 5

제로초(조현영)

지식공유자

로그인을 안 했을 때 profile페이지에서 index로 redirect 시킵니다.

김건희

질문자

질문1. 감사합니다 그런데 로그인 페이지는 /index.js라고 하셨는데, LoginForm페이지는 AppLayout.js에 속해있지 않나요?

어떻게 로그인페이지가 index.js 인지 궁금합니다.

제로초(조현영)

지식공유자

1. 로그인을 한 후 프로필 페이지로 이동할 때 접근이 되는 이유는, 로그인 페이지는 /index.js이고 여기서 사용자 데이터를 리듀서에 넣은 것을 profile.js로 가서 useSelector로 받을 수 있기 때문입니다.

2. 위의 코드가 없으면 profile페이지에서 새로고침을 할 때 동작하지 않습니다.

김건희

질문자

제로초님 제가 착각해서 질문을 잘못 드린 것 같습니다. 다시 설명 드리자면 profile.js의

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  // console.log('getServerSideProps start');
  // console.log(context.req.headers);
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type: LOAD_MY_INFO_REQUEST,
  });
  context.store.dispatch(END);
  // console.log('getServerSideProps end');
  await context.store.sagaTask.toPromise();
});

위의 코드를 지우고 나서 로그인을 한 후 프로필 페이지로 이동해도 프로필 페이지로 접근이 가능하고 팔로잉 팔로워 목록도 다 렌더링 되더라구요?

질문1. 이때는 왜 동작하는 것인지 궁금합니다. 위의 코드가 없음에도 불구하고 동작하는 이유가 로그인했을때 LOG_IN_SUCESS 리덕스에 데이터가 남아있어서 그 데이터로 profile.js페이지가 동작하는 것인가요?

질문2. 로그인 후 위의 코드가 없이도 동작은 하지만 위의 코드를 사용하여 서버사이드렌더링을 하여 한번 더 불러오는 것은 프로필 페이지가 렌더링 될때 me의 데이터를 빨리 하기위함인가요??

제로초(조현영)

지식공유자

1. 제가 강좌에서 말씀드린 swr과 리덕스의 장단점과 똑같습니다. 그 둘이 둘 다 SSR이 되는 것일 뿐이고요. GET에 한해서는 swr이 더 깔끔하다고 개인적으로 느꼈습니다.

2. use는 순서대로 위에서 아래로 실행됩니다.

3.index.js랑 profile.js는 별개의 페이지라 서로 영향을 미치지 않습니다. 2번이긴 한데 빨리 받아오게 하기위함이 아니라 없으면 아예 /profile로 접근할 때 동작하지 않습니다.

김건희

작성한 질문수

전체 Q&A

질문하기