signup 페이지 처리 관련(SSR & CSR) 질문

React로 NodeBird SNS 만들기

해결된 질문

작성

572

SSR의 경우

signup 컴포넌트 내에서 로 me 객체가 존재하는 경우(로그인되어 있을 때) return null(리디렉션하는 부분 빼고)하면 위와 같이 보여집니다. signup 컴포넌트만 빼고 렌더링 되는 거죠.

CSR의 경우

ch6 때 프론트 코드 이용해서(getInitialProps 사용부분 다 주석 처리), 똑같이 해보면(signup에서 return null) 그냥 아무것도 출력이 안되더라고요.

(물론, 그 직전에 살짝 모든 컴포넌트들이 렌더링 됬다가 백지로 전환되었습니다. 이는 CSR과 SSR의 차이를 보여주는 것으로 이해는 했습니다.)

결과적으로 어떤 컴포넌트도 렌더링되지 않게 되었습니다. CSR에서는 화면 상에 존재하는 컴포넌트 중 하나라도 return null이 되면 전부 렌더링되지 않는 것인가요? AppLayout 같은 건 signup의 부모격 컴포넌트일텐데도 아무것도 출력되지 않았습니다.

그런데 AppLayout은 SSR되는 것도 아닐텐데 UserProfile쪽은 me객체 데이터 사용하니까 SSR이라고 해도 말이죠.

제가 아직 SSR과 CSR 그리고 리액트로 브라우저에서 렌더링 되는 상세 프로세스 같은 것을 잘 모르는 것 같습니다..

간단히 정리해서 질문드리면 signup에서 return null 했을 때 2가지 경우에서 렌더링되는데 왜 저렇게 차이가 나는건지 제대로 알고 싶습니다.

javascript react

답변 4

제로초(조현영)

지식공유자

네네 맞습니다. 항상 같은 수의 훅스가 실행돼야 해서 return이나 if for같은 게 훅스를 감싸면 안 됩니다. 리액트 설계에서 조금 지저분한 부분이기도 합니다.

ssr을 하지 않으면 사용자정보를 로딩하기 전까지는 회원가입창이 보이는 것도 맞습니다. ssr에는 사용자정보를 미리 넣어줘서 가능하고요.

Jiyeol Lee

질문자

의문이 해결되었습니다. 제가 의문들었던 부분이 CSR, SSR 2가지 방식의 차이가 문제가 아니라

Uncaught Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

위와 같은 에러로 인해 아예 백지로 보여졌던 거였습니다. 함수형 컴포넌트 내에서 return을 hooks 보다 먼저 해주게 되서 발생했던 문제로 보입니다.

사실 상 제일 중요했던 CSR과 SSR의 차이도 다행히 이해했습니다.

강의에서 말씀하셨던 것처럼 me객체의 생성 타이밍이 포인트네요. CSR의 경우에는 if(me) return null 이 들어가있어도 me객체가 생성되기도 전에 컴포넌트가 마운트됩니다.(정확한 표현인지는 모르겠습니다.)

그리고 me객체는 없는것으로 판단하고 jsx 리턴을 하여 회원가입 폼을 렌더링시킵니다.

그 이후에 me 객체를 인식해서 메인페이지로 이동시키는 alert창이 나오지만, 해당 코드가 return null 보다는 위에 있기에 사용자가 alert창을 보고 잇을때 여전히 회원가입 폼이 보이게 됩니다. 그렇다고 아래와 같이 순서를 바꾸면

  if (me) {
    return null;
  }

  useEffect(() => {
    if (me) {
      alert("로그인했으니 메인페이지로 이동합니다.");
      Router.push("/");
    }
  }, [me && me.id]);
  
  return (
    <>
      <Form onSubmit={onSubmit} style={{ padding: 10 }}>

Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

이 에러가 다시 발생합니다.

디테일한 부분이겠지만 SSR을 사용하면 애초에 회원가입폼 jsx가 리턴되기전에 me 객체 인식해서 return null 해주니 signup 컴포넌트가 아예 렌더링되지 않는 거네요.

Jiyeol Lee

질문자

CSR의 경우 테스트용으로 ch6코드를 사용했고, SSR의 경우는 ch7파트 코드(아직 다 듣지는 않은)로 테스트해본 것입니다.

양쪽의 경우 모두 alert후 이동하는 부분 코드는 주석처리했습니다. (양쪽 경우 차이를 비교하기 위해)

양쪽 경우 모두 로그인 후 signup버튼은 없지 않나요? /signup 이렇게 url에 붙여서 들어가봤습니다. 영상에서도 직접 이런식으로 테스트하는 것 보여주셨던 것 같아요.

제로초(조현영)

지식공유자

지금 현재 코드가 ch6 기반이신가요? 로그인 후 localhost:3060/signup을 주소창을 통해 들어가면 alert로 "로그인했으니 메인페이지로 이동합니다." 이 부분이 떠서 메인페이지로 이동되지 않나요?

CSR의 경우에는 로그인 후 signup 버튼이 없을텐데 어떻게 들어가셨나요?

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

signup 페이지 처리 관련(SSR & CSR) 질문