React JS_Redirecting

#6.4 ~ 6.5

아래 강의 중 'ReacJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

 

1. 리다이렉트

리다이렉트란 페이지를 다른 주소로 연결해 강제 이동 시키는 것이다. state가 없는 경우 오류가 발생하므로 이를 핸들링하기 위해 리다이렉트를 한 것이다. 즉, state가 undefined일 때 홈으로 이동하도록 한 것이다.

 

리다이렉트를 할 때 보이는 history.push를 살펴보면, 지난 포스팅에서 리액트 라우트에 의해 전해지는 props 중 url를 변경할 수 있는 history라는 것이 있었다. history의 props인 push를 이용해 리다이렉트를 할 수 있다. 리다이렉트를 하는 방법 중 하나라고 보면 될 것 같다.

 

//src/routes/Detail.js
import React from 'react';

class Detail extends React.Component{
    componentDidMount(){
        const {location, history} = this.props;
        if(location.state === undefined){
            history.push("/"); //홈으로 리다이렉트
        }
    }
    render() {
        const {location} = this.props;
        if(location.state){
            return <span>{location.state.title}</span>
        } else{
            return null;
        }
    }
}

export default Detail;

 

 

2. Redux?

지금까지 만들어진 웹페이지는 Home으로 이동할 때마다 로딩을 한다. 너무 느리다. redux를 배우면 state를 어딘가에 저장해 두고 필요할 때만 꺼내서 쓰기 때문에 Home으로 갈 때 로딩없이 정보를 볼 수 있다.