문의드립니다!!

React로 NodeBird SNS 만들기

6-3. getInitialProps로 서버 데이터 받기

19.12.31 15:04 작성

184

hooks에서getInitialProps라고 함은,

현재 사용가능한 render 이전 상태의 라이프사이클 같은 느낌인데요..

이부분을 살짝 응용하여, login 페이지 접속시,

getInitialProps 단에서 user 정보 확인하여,

이미 로그인된 user의 정보가 존재하다면

"/" 경로로 push 해주는 기능을 구현하고 싶은데요..

확인을 해보니, _app 의 loadUser 실행 후, success 의 결과는 login page 의 getIntialProps 이후에 완료가 되더군요..

혹시나 getIntialProps 에서 user의 state를 갖는 방법이나,

class Component로 사용하면 사용가능한 방법이 있나요..?

componentWillMount 를 사용하려 했으나, 곧 사라질 라이프 사이클에, router 사용도 못하고..

* 참고로 Link로 이동하여 이미 state 가 존재하는 상태가 아닌 주소창에서 login 페이지를 입력하여 이동하거나, 새로고침을 하는 경우를 말씀드린 것입니다.

또한, 이렇게 구현하고자 하는 이유는 useEffect같은 라이프 사이클로 구현을 할 경우, 로그인된 사용자가 로그인 페이지로 접속할 때 잠깐 render되는 매끄럽지 못한 상황을 없애고자 생각을 하게 되었습니다.

이외에 좋은 방법이 있다면 추가로 알려주실수 있나요~~?

답변 2

질문자

2019. 12. 31. 19:50

제가 설명이 조금 부족했나봅니다.

부과적인 설명을 드리자면,

로그인 이후, 회원가입 페이지를 들어간다면,

강좌에서는 useEffect 를 사용하여, me 의 정보가 있다면

Router.Push 를 하여 메인페이지로 이동을 시켜주는데,

사실, useEffect 라는 사이클은 render 이후에 발생되는 사이클이라 매끄럽지가 않아보입니다.

그래서 getInitialProps 단에서 미리 체크 하여, fron server 단에서 push 를 해준다면 훨씬 매끄러울것 같아 제 스스로 응용하고자 찾아보고 구현하고자 했던 것입니다.

getInitialProps 에서는

const { res } = context;

if (res) {
      res.writeHead(302, {
        Location: '/'
      })
      res.end();
    } else {
      Router.push('/')
   };

이런식으로 처리가 가능하더군요. (router)

그런데 문제가 바로,

me의 존재여부(로그인여부)를 판단하고자하는

const state = context.store.getState();

state.user.me 의 데이터가 없다는 것이 문제여서 질문을 드렸었습니다.

ssr 을 통해, server 단에서 dispatch 하여 미리 데이터는 받아오지만, 순서가 아래와 같은 것 같더군요.

client signup 페이지 요청 -> _app -> getInitialProps -> 디스패치(유저정보가져오기) 요청[request] -> signup ->

geInitialProps -> 디스패치(유저정보가져오기) 성공[success] -> signup page render

이런 순으로 가져오는 것 같아,

signup.js 의 getInitialProps 단에서 render 이전에 처리할수 있는 방법이 있을까 하고 질문을 드렸습니다.

항상 감사합니다.

새해복 많이 받으세요.

지식공유자

2019. 12. 31. 16:20

깜박거리는 것을 해결하고자 ssr과 next를 사용하는 것이고 제 강좌에서 그 부분이 해결됩니다. 6장 끝부분까지 보시면 됩니다.

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