next.js에서 private route 만들기

어느 페이지에 들어가려고 할때 로그인 된 경우에만 들어갈 수 있도록 하고 싶다...
라는 생각으로 React에서도 private route를 Router 컴포넌트에 만들어줬었는데
next.js에서도 동일한 기능을 하는 HOC를 만들어보자.

 정말 간단하게 이 페이지를 들어갈때에 로그인되어 있어? 를 물어봐주는 HOC를 만들면 된다.

 진짜 간단하게 생각나는대로 아래의 코드를 만들었다. 
 만들고 동작해보니 정상적으로 동작하지만, 렌더링 과정에서의 상태 변화로 인한 경고창이 발생했다.

 렌더링 과정에서?
 컴포넌트를 렌더링하기 전에 withAuth를 통해서 router.push를 하는 과정에서 발생한 문제다.
 로그인이 되어있지 않아서 router.push를 실행하는 과정에서 상태값의 변동이 있고 이것을 하지 말라는 것이다.
 
 그럼 어떻게 하라는건데?
 렌더링 과정에 대해서 공부한 우리는 딱 렌더링 과정에서? 라는 말에 !느낌표가 꽃혀야한다. 초기 렌더링 이후 업데이트하기 위해서 동작하는 리액트의 훅! useEffect를 활용해서 초기 렌더링이 끝나고 나서 바꾸면 되는구나!? 라는 생각이 들었다면 당신은 React에서의 렌더링 기초는 패스하신 분!

 그렇게 해서 아래와 같이 코드를 작성해주니 정상적으로 동작한다.