[react] 노마드코더 영화웹서비스 제작 6.4 Redirecting

unu·2021년 6월 11일

Location State history history push route props 리다이렉트

[React] NomadCoders 영화 웹서비스 제작

목록 보기

24/25

지난 수업의 문제

우리는 "/movie-detail"에서 리프레시를 하거나, 직접 쳐서 들어가면 state=undefined를 얻게되는 경우들을 보았다.

해결방안: 리다이렉트

"/movie-detail"를 도메인에 직접 치거나, 리프레시를 하면 아예 홈화면으로 돌아가도록 유저를 홈으로 리다이렉트 시키는 것이 목표다.

여기서 리다이렉트란?
말 그대로 re(다시) + 지시하다(direct) 다시 지시하는 것이다.
예를 들어 브라우저가 www.test.com/page1 URL을 웹 서버에 요청하면 서버는 HTTP 응답 메시지를 통해 "www.test.com/page2 로 다시 요청하세요~" 라고 브라우저에게 다른 URL(길, 방향) 을 지시할 수 있다. 출처

준비물: Route의 Props

혹시 지난 수업에서 '라우트 안에 여러 props들이 있고 활용할 수 있다'는 내용을 기억하는지 모르겠다.history, location, match, staticContext 등이 그것인데, 우리가 이번 수업에서 필요한 건 history와 location이다.

location

location이 필요한 이유는 loacation 안에 있는 state 데이터 때문이다.
유저는 이 데이터 때문에 movie-detail 까지 온 것인데, state가 undefined라면 유저도 있을 필요없고, 서버도 가만히 냅둘 이유가 없다.

history

때문에 우리는 유저가 홈 화면으로 돌아가도록 지시할 것인데, 돌아가기 위해서는 history의 기능 중 하나인 push가 필요하다.

실전

지난번에 넣었던 props는 광범위하므로 브라켓을 씌운 location을 넣는다.
location이 잘 출력되는지 확인한다.

import React from "react";

function Detail({location}){
	console.log(location);
	return <span>hello</span>;
}
export default Detail;

잘 나오고 있다.

이후, 함수형 컴포넌트를 클래스형 컴포넌트로 바꾸었다. 클래스형 컴포넌트의 componentDidMount() 및 여타 기능을 쓰기 위해서다.

//클래스형 컴포넌트로➡️
import React from "react";

class Detail extends React.Component{
   componentDidMount(){  //Detail 컴포넌트가 탄생하면,
   const {location} = this.props; //this.props.location는 미리 나눠서 선언해준다. 
   console.log(location.state);
   }// 아까처럼 잘나온다.
   render(){
      return <span>hello</span>; //언제는 리턴 안해야된다지 않았나?
   }
}

export default Detail;

클래스형이 좀 더 복잡한 작성이 가능해서 그런지, location의 state만 잘 뽑아낸 것 같다. console.log(location.state)를 통해 state가 잘 나오는 것까지 확인 했다면, state가 undefined일 경우 리다이렉트를 해줄 수 있도록 한다.

history란

history 객체는 라우트로 사용된 컴포넌트에게 match, location 과 함께 전달되는 props 중 하나이다. 이 객체를 통하여, 우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있다. - 뒤로가기, 특정 경로로 이동, 이탈 방지 등- ::출처

우리가 사용할 push 에 대해서도 알아보자면
push(path, [state]) - (function) Pushes a new entry onto the history stack ::출처
새로온 사람을 히스토리 스택으로 밀어넣는 기능이라고 한다.

//__Detail.js
import React from "react";

class Detail extends React.Component{
    componentDidMount(){
    const {location, history} = this.props; //클래스 클라스...ㄷㄷ
    if(location.state === undefined){
        history.push("/");
    }
    }
    render(){
        return <span>hello</span>
    }
}

export default Detail;

컴포넌트가 마운트되면
this.props.location, this.props.history 를 간편하게 쓸 수 있도록 재료손질하듯 선언해준다. const {location, history} = this.props; 만약 location의 state가 undefined이면, history는 "/"를 push한다.