라우팅 (Routing)

다른 URL 주소에 따라 다른 화면을 부여해 주는 것 (페이지 이동)
기존의 이동 방법 (<a> 태그) : 완전히 새로운 페이지로 이동 (상태 정보 잃음)
SPA : 현재 페이지에 삽입 해서 보여 줌 (상태 정보 유지)
리액트 라이브러리 자체에는 라우팅 기능이 내장되어 있지 않음 -> 라우터 라이브러리 설치해서 쉽게 구현 가능

Link 컴포넌트

<a> 태그의 속성인 페이지 새로고침 막아줌
<a> 태그의 이동 방법 : 페이지를 전환하는 과정에서 완전히 새로운 페이지를 불러와 이동하기 때문에 애플리케이션이 갖고 있던 상태 정보를 모두 잃음
리액터 라우터를 사용할 때는 <a> 태그 사용하지 않고, (완전 새로운 페이지로 이동하고자 할 때는 사용하기도 함)
Link 컴포넌트를 사용하여 다른 주소로 이동 (<Link> 태그 사용)
- 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 페이지의 주소만 변경
- 페이지 전환 기능이 내장되어 있음
- ex ) <Link to='주소'>홈 화면 보기</Link>

라우팅 기능 구현 과정

1. 프로젝트 생성 및 react-router-dom 라이브러리 설치

npx create-react-app router-app  // 프로젝트 생성
npm install react-router-dom  // 라우터 설치

package.json에 "react-router-dom": "^6.2.1" 있으면 정상적으로 설치된 것

2. index.js에 다음과 같은 변경사항 반영

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter>
    <App />
</BrowserRouter>

import + App 컴포넌트를 <BrowserRouter> 컴포넌트로 감싸줌

3. 라우트로 사용할 컴포넌트 페이지 작성 - 함수형 컴포넌트로 작성 (Home.js, About.js)

// Home.js
function Home() {
    return (
      <div>
        <h1>Home 입니다.</h1>
        <p>방문을 환영합니다 ^^</p>
      </div>
    );
  }
  
  export default Home;
  
  
//  About.js
function About() {
    return (
      <div>
        <h1>사이트 소개</h1>
        <p>리액트 라우터 연습 프로젝트 입니다.</p>
      </div>
    );
  }
  
  export default About;

4. Route 컴포넌트로 특정 주소에 연결

- Routes 태그로 Route 태그들을 묶어줘야 함

- 라우트 하고 싶은 컴포넌트를 Route 컴포넌트로 감싸줌

- path : 어디로 갈건지. 주소 path

- element : 사용자 정의 태그 (작성한 컴포넌트들 (~.js) )

import { Link, Routes, Route } from 'react-router-dom'
import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

http://localhost:3000/ -> Home 컴포넌트로 이동

http://localhost:3000/about -> About 컴포넌트로 이동

위 코드는 눈에 안 보이게 내부에서 라우팅 해주는거

5. Link 태그 연결

<Link> 태그 사용하여 사용자가 클릭하여 이동할 수 있도록 보이는 영역 만들어주기

import { Link, Routes, Route } from 'react-router-dom'
import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <ul>
        <li><Link to="/">Home 화면 보기</Link></li>
        <li><Link to="/about">About 화면 보기</Link></li>
        {/*새로운 페이지로 넘어감 : _blank -> 새 창으로 열도록 설정 */}
        <li><a href='https://www.naver.com' target="_blank">네이버로 이동</a></li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

(+) URL 파라미터 사용하기 : path를 통해 파라미터 전달

예제 : Movie.js

import { useParams } from "react-router-dom";

const data = {
    spider : {
        title:'스파이더 노 웨이 홈',
        director : '존 왓츠',
        actor:'톰 홀랜드',
        date : '2021-12-15',
        genre : '액션'
    },
    king : {
        title:'킹스맨:퍼스트 에이전트',
        director : '매튜 본',
        actor:'팔프 파인즈',
        date : '2021-12-22',
        genre : '액션'
    }
}

function Movie() {
    // 넘어온 파라미터 받아줌
    const params = useParams();
    // 해당되는 키워드에 따른 파라미터 받아줌
    const movie = data[params.keyword];

    if (!movie) {
        return <div><hr/><div>영화 정보가 없습니다.</div></div>
    }

    return (
      <div>
        <hr/>
        <h3>{params.keyword} : {movie.title}</h3>
        <p>감독 : {movie.director}</p>
        <p>배우 : {movie.actor}</p>
        <p>개봉일 : {movie.date}</p>
        <p>장르 : {movie.genre}</p>
      </div>
    );
  }
  
  export default Movie;

예제 : App.js

import { Link, Routes, Route } from 'react-router-dom'
import Movie from './components/Movie';

function App() {
  return (
    <div className="App">
      <ul>
        <li><Link to="/movie/spider">스파이더맨</Link></li>
        <li><Link to="/movie/king">킹스맨</Link></li>
        <li><Link to="/movie/squid">오징어 게임</Link></li>
      </ul>
      <Routes>
        <Route path="/movie/:keyword" element={<Movie />} />
      </Routes>
    </div>
  );
}

export default App;

useParam() 함수를 통해 해당 키워드에 대한 파라미터 받아, 각 링크 클릭 시 Movie.js에서 data[키워드]에 해당하는 객체의 값 출력

import { useParams } from "react-router-dom"; 해줘야 함

라우팅 연습문제

App.js

import { Link, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Content from './components/Content';
import Book from './components/Book';
import About from './components/About';

function App() {
  return (
    <div className="App">
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/content">전체 도서 정보 조회</Link></li>
        <li><Link to="/book/pig">아기 돼지 삼형제</Link></li>
        <li><Link to="/book/duck">미운 오리 새끼</Link></li>
        <li><Link to="/about">About...</Link></li>
      </ul>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/content" element={<Content />} />
        <Route path="/book/:keyword" element={<Book />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

Home.js

import React from 'react';

function Home() {
    return (
        <div>
            <h1>Home</h1>
            <p>환영합니다.</p>
        </div>
    );
};

export default Home;

Content.js

import React from 'react';

function Content() {
    return (
        <div>
            <table border='1'>
                <tr><th>제목</th><th>저자</th><th>출판사</th><th>발행일</th></tr>
                <tr><td>아기 돼지 삼형제</td><td>김작가</td><td>꿀꿀출판사</td><td>1972-07-15</td></tr>
                <tr><td>미운 오리 새끼</td><td>이작가</td><td>꽥꽥출판사</td><td>1974-05-02</td></tr>
            </table>
        </div>
    );
};

export default Content;

Book.js

import React from 'react';
import { useParams } from "react-router-dom";

const books = {
    pig : {
        title:'아기 돼지 삼형제',
        author:'김작가',
        publisher:'꿀꿀출판사',
        date:'1972-07-15'
    },
    duck : {
        title:'미운 오리 새끼',
        author:'이작가',
        publisher:'꽥꽥출판사',
        date:'1974-05-02'
    }
}
function Book() {
    const params = useParams();
    const book = books[params.keyword];
    
    if (!book) {
        return <div><hr/><div>영화 정보가 없습니다.</div></div>
    }
    
    return (
    <div>
        <hr/> <h3>{params.keyword} : {book.title}</h3>
        <p>작가 : {book.author}</p>
        <p>출판사 : {book.publisher}</p>
        <p>출판일 : {book.date}</p>
    </div>
    );

};

export default Book;

About.js

import React from 'react';

function About() {
    return (
        <div>
            <h1>About</h1>
            <p>도서 정보 제공 페이지 입니다.</p>
        </div>
    );
};

export default About;

저작자표시 비영리 변경금지

'Frontend > React' 카테고리의 다른 글

리액트 배열 내장 함수 : map() (0)	2022.03.18
리덕스 개념 (0)	2022.03.15
MPA(Multiple Page Application) & SPA (Single Page Application) (0)	2021.12.20
이벤트 처리 시 주의점 (0)	2021.12.20
이미지를 출력하는 두 가지 방법 (0)	2021.12.20

0lli2

라우팅 (Routing)