TIL_React의 Router?

TIL(Today I learned) 을 기록하는 공간입니다.

잘못된 내용 또는 부족한 내용에 대한 수정 및 지적 환영합니다. 

 

---

 

https://velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

 

◆ 주소에 따라 다른 화면을 보여주기 위해서는 어떻게 해야할까?

- 여러 화면을 가진 웹 어플리케이션을 구성하려면 라우팅!

- 주소에 따라서 다른 뷰를 보여주는 것을 라우팅이라고 한다.

- 리액트 자체에는 내장되어 있지 않기 떄문에 API를 사용해야한다.

→ 그래서 오늘 사용하게될 라이브러리, react-router!

 

◆ 공부하면서 부족했던 내용 정리하기. (velopert님의 React-Router Tutorial 참고 )

 

#경로에 맞게 컴포넌트 연결하기

import React { Component } from 'react'
import { Route } from 'react-router-dom'
import { Home, About } from 'pages';

calss App extends Component {
	render(){
    	return(
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
        );
    }
}

export default App;

- <a/> 태그 대신에 <Route/>를 이용한다.

- exact 키워드는 path와 접속경로가 정확히 맞아야지만 실행된다.

- 만약 exact 키워드가 없다면? 접속경로가 일치하지 않아도 path값이 들어가있으면 실행!

=> 위 코드에서 exact를 지우고 '/about'으로 접속하면, 

     Home(/포함O)과 About(/about포함O) 컴포넌트가 모두 렌더링 될 것이다!

---

#라우트의 경로로 값 전달하기

//About.js
import React from 'react'
import queryString from 'query-string'
 
const About = ({location, match}) => {
	const query = queryString.parse(location.search);
    console.log(query);
    
    return (
        <div>
            {match.params.name}
        </div>
    );
}

export default About;

//----------------------------------------------------

//App.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { Home, About } from 'pages';

class App extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={Home}/>
                <Switch>
                  <Route path="/about/:name" component={About}/>
                  <Route path="/about" component={About}/>
            	</Switch>
            </div>
        );
    }
}

export default App;

- 라우트의 경로에 값을 넣어서 전달 할 수 있다!

- params를 사용하는 것과,  query를 사용하는 것!

- route로 설정한 컴포넌트는 3가지의 props를 가진다.

    1) history - 다른 경로로 이동하거나, 페이지 전환 가능

    2) location - 현재 경로에 대한 정보 및 URL 쿼리에 대한 정보도 가지고 있음 ( 컴포넌트 내에서 동적사용 O )

       => /about/foo?detail=true ***받을때는 queryString.parse(location.search) *

    3) match - 어떤 라우트에 매칭되었는지에 대한 정보!, params 정보를 가지고 있음 (꼭 라우트에서 지정 해주기 )

       => /about/:name ***받을 때는 {match.params.name} *

- Switch 키워드는 exact처럼 중복된 경로에 대하여 매칭되는 첫번째 라우트만 보여준다! 

      => 그대신 /about:name이 /about보다 위에 있어야함!! (안그러면 name을 입력해도 /about만 렌더링)