React(36) 리액트 훅 - 동적라우팅으로 페이지 이동

리액트를 사용하여 다이나믹 라우팅(Dynamic Routing) 을 구현하여 페이지를 동적으로 이동해보자.

 

스포일러

Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다.

(Day2 를 누르면 day/2 로 변할 것이다.)

 

---

React(36) 리액트 훅 - 동적라우팅으로 페이지 이동

 

라우터 설치하기 

터미널에 아래 명령어로 리액트 라우터를 설치하기

npm install react-router-dom

 

컴포넌트 구조

- component 안에는 Days.js / DayList.js / Header.js 컴포넌트들이 들어있다.

- db 안에는 data.json 이라는 객체 데이터가 들어있다. ( api역할 )

- App.js 는 최상위 컴포넌트이다.

 

 

App.js

여기에서 라우터를 대놓고 설치한다. 여기서 라우팅할 컴포넌트들을 <Route>태그에 담아 path도 지정해준다.

1. <BrowserRouter> 태그로 전체를 감싸고
2. <Switch> 태그로 하위 라우터 컴포넌트들을 감싼 뒤, 
3. <Route> 태그 안에 라우팅할 컴포넌트를 쏙 넣는다. (여기에 잘 넣어줘야 url 별로 보여지는 페이지가 달라진다.)
4. 동적 라우팅하려면 <Route path="/:_____"> path 속성 뒤에 :을 붙이고 원하는 객체 데이터의 키(key)를 넣는다. (그래야 키 값이 변하면서 내용물이 달라진다.)

import { BrowserRouter, Route, Switch } from "react-router-dom" // 라우터 기능 임포트 필수! 
import Header from "./component/Header";
import DayList from "./component/DayList";
import Day from "./component/Day";

function App() {
  return (
    <BrowserRouter>		   // 1. <BrowserRouter> 태그로 전체를 감싼다.
      <div className="App">
        <Header />
        <Switch>		   // 2. <Switch> 태그로 라우터 컴포넌트 전부 감싼다.
          <Route exact path="/">   // 3. <Route> 태그안에 컴포넌트를 넣는다.
            <DayList />
          </Route>
          <Route path="/day/:day"> // 4. 동적 라우팅을 위해 path 뒤에 :을 붙이고 원하는 api키를 넣는다.
            <Day />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
} 
export default App;

 

Header.js 

Header 는 라우팅 시, 이동하는 것이 아닌 화면 상단에 고정된다. 

리액트에서는 <a href=""> 태그 대신 <Link to="">를 사용한다. 

그래서 <Link>태그로 타이틀을 감싸 버튼처럼 누르면 첫화면으로 돌아간다.

import { Link } from "react-router-dom";     // 1. Link 기능을 설치 

export default function Header() {
  return (
    <div className="header">
      <h1>
        <Link  to="/">토익 영단어(고급)</Link> // 2. <Link> 태그로 제목을 감싼다. (처음으로 돌아가기)
      </h1>
      <div className="menu">
        <a href="#x" className="link">
          단어 추가
        </a>
        <a href="#x" className="link">
          Day 추가
        </a>
      </div>
    </div>
  )
   
}

 

DayList.js

DayList 에서는 영단어를 공부할 날짜가 나온다. 그 날짜 별로 클릭하면 날짜에 배정된 영단어 목록이 나올 것이다. 

<Link to={`/day/${day.day}`}> 로 동적 라우팅을 사용하여 날짜를 누르면 해당 날짜를 url 로 받은 페이지로 이동한다. 

import dummy from "../db/data.json"
import { Link } from "react-router-dom" // 1. Link 기능을 임포트한다.

export default function DayList() {

  return (
    <ul className="list_day">
      {dummy.days.map((day) => (
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>  // 2. to=""는 동적으로 전달될 path를 넣어준다.
          	Day {day.day}
           </Link> 
        </li>
      ))}
    </ul>
  );
}

 

Day.js

useParams() 는 path 에 url 로 전달받은 값을 보여주는 함수이다.

day 라는 변수에  DayList.js 에서 날짜별 버튼을 클릭하여 전달받은 url (날짜) 값을 저장한 뒤,

영단어 객체 내의 day 값으로 넣어 그 날의 영단어 내용을 가져온다.  

import dummy from "../db/data.json";
import { useParams } from "react-router-dom" // 1. useParams 라는 기능을 임포트한다.

export default function Day() {
  // const day = useParams().day // 2. 3번과 같은 결과가 나온다. 
  // console.log(day)		 //    url 에 /1 로 찍히면 useParams 으로 1을 읽어온다.
  const { day } = useParams()    // 3. useParams 에 찍힌 숫자를 day 로 변수 지정한다.
  
  const wordList = dummy.words.filter(word => (
    word.day === Number(day)	// 4. 3번의 값이 여기로 들어간다.
  ))

  return (
    <div>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {wordList.map((word) => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

 

여기서 Number 가 들어가는 이유는

useParams 로 가져온 값이 숫자이지만 "3" 과 같은 문자열로 된 숫자이기 때문이다.

원래 DB에서 가져온 객체는 숫자이기 때문에 결론적으로 타입이 달라 형변환을 해줘야 사용할 수 있다.

 const wordList = dummy.words.filter(word => (
    word.day === Number(day)	// 4. 3번의 값이 여기로 들어간다.
  ))

 

 

실행화면

Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다.

아주 잘 나온다! 성공

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists