React - Router

1. Router 개요

• SPA는 단일 페이지므로 사용자가 브라우저에 URL을 입력하면 서버는 같은 페이지를 반환한다.
• JavaScript에서 페이지를 구성하고 이동하면 사용자가 브라우저를 새로 고침 하는 순간 처음 화면으로 돌아간다.
• 페이지마다 주소가 없으므로 특정 페이지에 접속하기 힘들고 북마크를 할수없다는 단점이 있다. 이를 개선하기 위해 JavaScript에서 URL과 페이지를 유기적으로 구성하고, 브라우저의 history와 동기화 해야한다.

리액트 라우터를 이용하면 URL를 다양한 URL로 구성할수있으며, 다양한 URL의 따른 리액트 컴포넌트와의 맵핑을 진행할수있다.

2. React-Router 주요 컴포넌트

• BrowserRouter : 이 컴포넌트는 컴포넌트를 기반으로 하며 HTML5 history객체를 이용해 포함한 컴포넌트들 간의 라우팅을 지원한다.
• Route : 컴포넌트는 경로(path)에 따라 해당 컴포넌트를 렌더링 하는 가장 기본이 되는 컴포턴트이다.
• Link : 컴포넌트는 html의 <a>와 같은 페이지 이동이 아닌 브라우저의 URL을 변경한다.
• NavLink : Link와 동일하나 스타일속성을 부여할수있다. (class="active")
  이외의 Redirect, Switch 등이 있다.

3. React-Router 시작

React-Router 설치

yarn add react-router-dom

/src/App

import { Route, Switch } from "react-router";
  
// 루트경로가 다른경로에 중첩되기때문에 exact를 부여한다 */}
<Switch>
// 잘못된 URL일 경우 오류를 띄울수있다. 404처리
	<Route exact path="/" component={Main} />
	<Route path="/about" component={About} />
	<Route path="/lessons" component={Lessons} />
	<Route component={() => <h2>404 Not Found</h2>} />
    // switch를 이용하여 예외처리가 가능하다  
</Switch>

/src/Nav

import { Link, NavLink } from "react-router-dom"; 

<li>
	<NavLink exact to="/">
		Main  
	</NavLink>
</li>
<li>
	<NavLink exact to="/about">
		About  
	</NavLink>
</li>
<li>
	<NavLink exact to="/lessons">
		Lessons  
	</NavLink>
</li>

상세페이지 내부링크

/src/Lessons

// 정적데이터  
import lessonsData from "../static-data/lessonsData";  
import Lesson from "./Lesson";
import { NavLink, Route } from "react-router-dom";  
  
class Lessons extends Component {
  render() {
    const links = lessonsData.map((lesson) => {
      return (
        <div component="nav" key={lesson.id}>
          <NavLink to={`/lessons/${lesson.id}`}>{lesson.name}</NavLink>
        </div>
      );
    });

    return (
      <div>
        <div>
          <div>{links}</List>
        </div>
        <div>
          {/* parameter 지정할때 /: 이름지정 */}
          <Route path="/lessons/:lessonId" component={Lesson} />
        </div>
      </div>
    );
  }
}

export default Lessons;
  

import React, { Component } from "react";
import lessonsData from "../static-data/lessonsData";

class Lesson extends Component {
  render() {
    const lessonId = this.props.match.params.lessonId;
    const selectedLesson = lessonsData.find((lesson) => {
      return lesson.id === Number(lessonId);
    });

    return <div>{selectedLesson.description}</div>;
  }
}

export default Lesson;