[REACT] React - Route 사용

티스토리 뷰

React

[REACT] React - Route 사용

Hwan'ss 2019. 8. 14. 17:16

SPA(Single Page Application)

- 싱글 페이지 어플리케이션이다. 말 그대로 페이지가 1개인 어플리케이션이라는 뜻이다.

- 여러 화면으로 구성된 웹 어플리케이션을 만들게 된다면, react-router는 필수 라이브러리이다.

1. SPA의 단점

- 앱의 규모가 커지면 JS 파일 사이즈가 너무 커지게 된다. 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문이다. 하지만 Code Splitting을 사용한다면 라우터 별로 파일들을 나눠서 트래픽과 로딩속도를 개선 할 수 있다.

2. 필요한 라이브러리

npm install -g react-router-dom

npm install -g query-string

3. 예제

Ex01. 라우터를 사용하기 위한 초기 설정

- 설치한 react-router-dom 라이브러리에서 BrowserRouter을 import 시켜준다.

- 사용할 componet를 <BrowserRouter> 태그를 이용해 감싸준다.

- 감싸준 component는 앞으로 사용가능한 라우터 장비가 된다.

// App.js
// 라우터 장비 설정

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter } from 'react-router-dom';

class Root extends Component {
  render() {
    return (
      <div>
        <h1>나는야 루뜨</h1>
        
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 함수형 컴포넌트
const App = () => {
  return (
    <div>
      <h2>나는야 App</h2>
    </div>
  )
}

export default Root;

Ex02. Route의 사용1

- Ex01에서 설정한 라우터 장비 App 컴포넌트 안에 Route를 선언해 준다.

- path='/' : 메인을 부르는 주소 '/'는 기본주소를 의미한다.

- component={Bpp} : 내가 갈 곳(끌어올 컴포넌트)

// App.js
// Step 2

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter, Route } from 'react-router-dom';

class Root extends Component {
  render() {
    return (
      <div>
        <h1>나는야 루뜨</h1>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      {/* path='/' : 메인을 부르는 주소 '/'는 기본주소를 의미한다.*/}
      {/* component={Bpp} : 내가 갈 곳(끌어올 컴포넌트) */}
      {/* http://localhost:3000 하면 Bpp를 끌어와라 */}
      <Route path='/' component={Bpp}/>

      {/* http://localhost:3000/tiger 하면 Cpp를 끌어와라. */}
      <Route path='/tiger' component={Cpp}/>
    </div>
  )
}

const Bpp = () => {
  return (
    <div>
      <h2>여기는야 Bpp</h2>
    </div>
  )
}

const Cpp = () => {
  return (
    <div>
      <h2>여기는야 Cpp</h2>
    </div>
  )
}

export default Root;

localhost:3000은 '/' 인 기본주소에 해당되기 때문에 Bpp 컴포넌트만 호출이 된다.

'/tiger'의 경우에 '/' 즉, 기본주소가 포함되어 있기 때문에 Bpp 컴포넌트도 같이 출력이 된다.

Ex03. Route의 사용2

- Ex02에서 추가하여 '/tiger'를 호출 했을 때 기본주소인 Bpp 컴포넌트가 출력이 되지 않고 지정한 경로의 컴포넌트만 출력을 하고 싶다면 exact를 path 앞에 추가해 주면 된다.

// App.js
// Step 2

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter, Route } from 'react-router-dom';

class Root extends Component {
  render() {
    return (
      <div align='center'>
        <h1>나는야 루뜨</h1>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>
      {/* path='/' : 메인을 부르는 주소 '/'는 기본주소를 의미한다.*/}
      {/* component={Bpp} : 내가 갈 곳(끌어올 컴포넌트) */}
      {/* http://localhost:3000 하면 Bpp를 끌어와라 */}
      <Route exact path='/' component={Bpp}/>

      {/* http://localhost:3000/tiger 하면 Cpp를 끌어와라. */}
      <Route exact path='/tiger' component={Cpp}/>
    </div>
  )
}

const Bpp = () => {
  return (
    <div>
      <h2>여기는야 Bpp</h2>
      <h6>----------------------------------</h6>
    </div>
  )
}

const Cpp = () => {
  return (
    <div>
      <h2>여기는야 Cpp</h2>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

Ex04. 인수 사용1

- url에 입력한 인수 값을 사용하고 싶을 경우의 예제이다.

- path='/sub/:pm' 를 사용하게 되면 url에서 /sub/의 뒤에 있는 값을 인수로 받아서 사용할 수 있다.

- match 객체가 값을 받는다.

// App.js
// Step 4

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter, Route } from 'react-router-dom';

class Root extends Component {
  render() {
    return (
      <div align='center'>
        <h1>나는야 루뜨</h1>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>

      {/* 인수로 사용하고 싶다. */}
      {/* http://localhost:3000/sub/lion에서 lion 글자를 pm이 받겠다. */}
      {/* Dpp에서 props 객체로 받는 것이 아니라 match 객체를 사용한다.*/}
      <Route exact path='/sub/:pm' component={Dpp}/>
    </div>
  )
}


// pm의 값을 match 객체로 전달된다.
const Dpp = ({match}) => {
  console.log(match);
  
  // match 객체의 pm 값 출력
  //console.log(match.params.pm);
  
  return (
    <div>
      <h2>여기는야 Dpp</h2>
      <h2>pm : {match.params.pm}</h2>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

localhost:3000/sub/lion에서 lion을 인수로 받아 사용

Ex05. 인수 사용2

- path='/Epp' 로 설정한 후 뒤에 '?name=홍길동' 을 하게 되면 name 값을 홍길동으로 받아서 사용 할 수 있다.

- 이 방법에서는 match가 아닌 location 객체가 인수로 받아 사용을 한다.

// App.js
// Step 5

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter, Route } from 'react-router-dom';
import qs from 'query-string';

class Root extends Component {
  render() {
    return (
      <div align='center'>
        <h1>나는야 루뜨</h1>
        <h6>----------------------------------</h6>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>
      {/* ?name= 을 사용한 예제 */}
      <Route exact path='/Epp' component={Epp}/>
    </div>
  )
}

// location 객체가 받는다.
const Epp = ({location}) => {
  // query-string 사용
  const n = qs.parse(location.search)
  console.log(n.name);
  
  // 아래 방식으로 하면 ?name=tiger 까지 받아오게 된다. 이를 방지하기 위해 query-string을 사용한다.
  //console.log(location.search);

  return (
    <div>
      <h2>여기는야 Epp</h2>
      <h3>name : {n.name}</h3>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

localhost:3000/Epp?name=홍길동 에서 name의 값을 출력, name의 값을 임의로 변경해도 변경한 값을 출력한다.

Ex06. 인수 사용2 - 여러 개 인수 사용

- Ex05에서 하나의 인수를 전달했는데 여러개의 인수를 전달 할 수도 있다.

- '?name=홍길동&age=15&num=1234' 와 같이 &로 나열해 주면 된다.

// App.js
// Step 6

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter, Route } from 'react-router-dom';
import qs from 'query-string';

class Root extends Component {
  render() {
    return (
      <div align='center'>
        <h1>나는야 루뜨</h1>
        <h6>----------------------------------</h6>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>

      {/* ?name= 을 사용한 예제 */}
      {/* ?name=홍길동&age=30 등 여러개의 인수로 넘길 수 있다. */}
      <Route exact path='/Epp' component={Epp}/>
    </div>
  )
}

// location 객체가 받는다.
const Epp = ({location}) => {
  // query-string 사용
  // 여러 개의 인수를 넘겨 받을 수 있다.
  const n = qs.parse(location.search)
  
  // 아래 방식으로 하면 ?name=tiger 까지 받아오게 된다. 이를 방지하기 위해 query-string을 사용한다.
  //console.log(location.search);

  return (
    <div>
      <h2>여기는야 Epp</h2>
      <h3>name : {n.name}</h3>
      <h3>age : {n.age}</h3>
      <h3>num : {n.num}</h3>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

Ex07. 인수 사용 두 가지 같이 사용하기

- '/:pm' 과 '?name=홍길동' 을 같이 사용할 수 있다.

// Step 7
// FPP/tiger?name=홍길동&age=30

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.
import { BrowserRouter, Route } from 'react-router-dom';
import qs from 'query-string';

class Root extends Component {
  render() {
    return (
      <div align="center">
        <h1>나는야 루뜨</h1>
        <h6>----------------------------------</h6>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>

      <Route exact path='/Fpp/:pm' component={Fpp}/>
    </div>
  )
}

// localhost:3000/Fpp/나는야fpp?name=홍길동&age=30 으로 사용하고 싶다면
// match와 location을 둘다 받아서 사용하면 된다.
const Fpp = ({match, location}) => {
  const n2 = qs.parse(location.search)

  return (
    <div>
      <h2>여기는야 Fpp</h2>
      <h3>pm : {match.params.pm}</h3>
      <h3>name : {n2.name}</h3>
      <h3>age : {n2.age}</h3>
      <h6>----------------------------------</h6>
    </div>
  )
}



export default Root;

Ex08. Link의 사용

- 직접 url에 일일이 경로를 작성하지 않도록 Link를 사용하는 방법이 있다.

- Ex07 예제와 동일하지만 Link를 사용하는 예제이다.

- Link를 사용하기 위해서는 import 해 주어야 한다.

- <Link> 태그를 추가하고 옵션 to에 path를 작성해 주면 Link1을 클릭하면 바로 페이지가 이동한다.

// App.js
// Step 8

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.

// Link는 타이핑 치기 귀찮으니 타이핑을 대신 해준다는 개념으로 알고 있어라.
import { BrowserRouter, Route, Link } from 'react-router-dom';
import qs from 'query-string';

class Root extends Component {
  render() {
    return (
      <div align="center">
        <h1>나는야 루뜨</h1>
        <h6>----------------------------------</h6>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>

      {/* Link1 버튼을 클릭하면 gpp로 자동 타이핑 */}
      {/* Fpp와 동일한데 Link을 사용하여 자동 타이핑이 되도록 설정 */}
      <Route exact path='/Gpp/:pm' component={Gpp}/>
      <Link to='/Gpp/tiger?name=홍길순&age=50'>Link1</Link>
    </div>
  )
}

const Gpp = ({match, location}) => {
  const n3 = qs.parse(location.search)

  return (
    <div>
      <h1>여기는야 Gpp</h1>
      <h3>pm : {match.params.pm}</h3>
      <h3>name : {n3.name}</h3>
      <h3>age : {n3.age}</h3>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

Ex09. Link에 외부변수 사용

- Ex08 과 동일하지만 Link의 to 값을 외부변수를 사용한 예제이다.

// App.js
// Step 9

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.

// Link는 타이핑 치기 귀찮으니 타이핑을 대신 해준다는 개념으로 알고 있어라.
import { BrowserRouter, Route, Link } from 'react-router-dom';
import qs from 'query-string';

const a = 'Tiger'
const b = '홍길동'
const c = 300
// `사용 알기
const s = `/Gpp/${a}?name=${b}&age=${c}`

class Root extends Component {
  render() {
    return (
      <div align="center">
        <h1>나는야 루뜨</h1>
        <h6>----------------------------------</h6>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>

      {/* Link1 버튼을 클릭하면 gpp로 자동 타이핑 */}
      {/* 값 고정, 수정시 외부변수 사용 */}
      {/* Fpp와 동일한데 Link을 사용하여 자동 타이핑이 되도록 설정 */}
      <Route exact path='/Gpp/:pm' component={Gpp}/>
      <Link to={s}>Link1</Link>
      
    </div>
  )
}

const Gpp = ({match, location}) => {
  const n3 = qs.parse(location.search)

  return (
    <div>
      <h1>여기는야 Gpp</h1>
      <h3>pm : {match.params.pm}</h3>
      <h3>name : {n3.name}</h3>
      <h3>age : {n3.age}</h3>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

Ex10. button link 사용

- Ex09에서 사용한 Gpp의 외부 변수를 가지고 있는 Link를 button 태그로 감싸주면 button을 Link 처럼 사용 할 수 있다.

// App.js
// Step10

import React, { Component } from 'react';

// BrowserRouter 함수 끌어옴
// 라우터 장비 설정을 위해 필요한 함수이다.

// Link는 타이핑 치기 귀찮으니 타이핑을 대신 해준다는 개념으로 알고 있어라.
import { BrowserRouter, Route, Link } from 'react-router-dom';
import qs from 'query-string';

const a = 'Tiger'
const b = '홍길동'
const c = 300
// `사용 알기
const s = `/Gpp/${a}?name=${b}&age=${c}`

class Root extends Component {
  render() {
    return (
      <div align="center">
        <h1>나는야 루뜨</h1>
        <h6>----------------------------------</h6>
        {/* <App는 앞으로 라우터 장비입니다.> 라고 설정 , App는 라우터 장비*/}
        <BrowserRouter>        
          <App/>
        </BrowserRouter>
      </div>
    );
  }
}

// 라우터 App
// App가 장비이기 때문에 router을 app안에 선언하는 것이 맞다.
const App = () => {
  return (
    <div>
      <h2>여기는야 App</h2>
      <h6>----------------------------------</h6>

      {/* Link1 버튼을 클릭하면 gpp로 자동 타이핑 */}
      {/* Fpp와 동일한데 Link을 사용하여 자동 타이핑이 되도록 설정 */}
      <Route exact path='/Gpp/:pm' component={Gpp}/>
      <Link to={s}>Link1</Link>
      {/* 값 고정, 수정시 외부변수 사용 */}
      
      <br/><br/>

      {/* 버튼을 클릭했을 경우 Link와 같은 동작을 하도록 함 */}
      <Link to={s}><button>Click</button></Link>
    </div>
  )
}

const Gpp = ({match, location}) => {
  const n3 = qs.parse(location.search)

  return (
    <div>
      <h1>여기는야 Gpp</h1>
      <h3>pm : {match.params.pm}</h3>
      <h3>name : {n3.name}</h3>
      <h3>age : {n3.age}</h3>
      <h6>----------------------------------</h6>
    </div>
  )
}

export default Root;

2019.08.14(수)

React - Route 사용

'React' 카테고리의 다른 글

[React] React - JS koa서버 구축+React 에서의 데이터 요청 (0)	2019.08.22
[REACT] React - axios의 사용 (0)	2019.08.22
[REACT] React - .css .scss 사용 (0)	2019.08.13
[REACT] React - map()복습, JS문법 concat/slice/pop/전개연산/비구조화 할당 사용 (0)	2019.08.08
[REACT] React - event, state, tag, map(), lifecycle, 함수형 컴포넌트 (0)	2019.08.07

공지사항

안농2

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

티스토리 뷰

[REACT] React - Route 사용

'React' 카테고리의 다른 글

티스토리툴바