인프런 React 강의 듣고 사이트 만들기 _ Front 작업 04. next@9 리다이렉션 시키기

 

react에서 리다이렉션 시키려면 모듈을 설치하여 작업해주어야합니다.

하지만 next에서는 따로 설치 없이 간단히 사용할 수 있습니다.

 

로그인하지 않았다면 로그인 화면으로 보내는 작업을 하겠습니다.

next/router 를 통해 작업하기 위해 import를 해줍니다.

import Router from 'next/router';

 

컴포넌트가 생성될 때 실행되어야하기 때문에 useEffect를 통해 작업합니다.

import React, { useEffect } from 'react';

코드는 아래와 같습니다.

useEffect(() => {
  if(!nickname){
  	Router.replace('/login');
  }
}, [nickname]);

if문을 통해 해당 state 값이 없으면 Router.replace를 통해 login 페이지로 리다이렉션시켜줍니다.

여기서 Router.push를 이용하지 않고 replace를 이용한 것은 history를 남기지 않아 뒤로가기 버튼을 동작하지 않게 만들기 위함입니다.

 

저는 state 값으로 nickname을 사용했는데, 로그인에 관련 된 state값이면 되겠죠? 뭐 id나 useInfo등등

마지막 인자로 [ nickname ] 을 적어주면됩니다.

nickname state가 수정되면 useEffect가 다시 실행됩니다.

 

 

이렇게하면 index에 접근했을때 /login 페이지로 리다이렉트 됩니다.!!

짱간단^^