Login page(2)

useEffect 와 useRouter를 활용한 렌더링 및 페이지 이동

const [tokenRouter, setTokenRouter] = useState(false);
//post 요청을 보냈는지 판단하기 위한 Boolean 상태값

const router = useRouter(); 

useEffect(() => {
    if(tokenRouter === true) {
      router.push("/"); 
      // next.js에서는 메인 페이지가 index.tsx이며 유저들의 상품 목록이 보이는 페이지이다 
    }
  }, [tokenRouter, router])

Next.js에는 useRouter라는 아주 훌륭한 router 내장 메서드가 있다. 따로 추가 설치가 필요없고 사용 방법도 공식 홈페이지에서 자세히 알기 쉽게 설명 되있다. useEffect를 활용하여 특정 props 상태가 변경 할 때만 페이지를 이동하도록 하였다. 여기서 tokenRouter 상태값은 Boolean 타입으로 하여 post 요청을 하게 되면 tokenRouter 값이 false에서 true 값으로 상태가 변경 되도록 만들었다.

다음 기록은 회원 가입 post 요청에 가장 중요한 부분 중 하나인 DB ORM 설정을 기록 할 차례이다