React 입문 - 페이지생성 react-router-dom 사용법

 

* react-router-dom은 버전마다 코드가 다를 수 있음

 

 

• 패키지 추가

yarn add react-router-dom

 

 

• 페이지 컴포넌트 만들기
• 이동해야할 페이지 만들기
• router.js 파일 만들어서 router 설정코드 작성
• app.js에 import 하고 라우터 설정코드 적용

 

 

import React from 'react';

const Home = () => {
    return <div>Home</div>
}

export default Home;

Home.jsx

 

import React from 'react';

const About = () => {
    return <div>About</div>
}

export default About;

About.jsx

 

import React from 'react';

const Contact = () => {
    return <div>Contact</div>
}

export default Contact;

 Contact.jsx

 

import React from 'react';

const Works = () => {
    return <div>Works</div>
}

export default Works;

 Works.jsx

 

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Router.js

위의 더보기에서 폴더생성및 파일 4개 생성하고 넣은 기본코드를 볼 수 있다.

이렇게 import를 다 하고 난 뒤에는 router에 URL 설정을 해준다.
routers에는 react-router-dom에서 지원하는 props 들이 있다.

 

이렇게 Routers 안에 URL을 넣고 나면 App.js에 Router.js를 import 해준다.

App.js로 와서 Router를 import해준다.
그리고 App 컴포넌트 return문에 Router를 넣어준다.

App 컴포넌트에 넣어주는 이유는 프로젝트에서 가장 상위에 존재하는 컴포넌트가 App.js이기 때문이다.
우리가 어떤 컴포넌트를 화면에 띄우던지 App.js를 거쳐야 한다.
그래서 path별로 분기가 되는 Router.js파일을 App.js에 위치시키고
서비스를 이용하는 사용자가 항상 App.js를 거쳐 Router.js를 거치도록 코드를 구현해준다.

 

영상을 보면 프로젝트를 실행시켜주면 첫 화면에 Home이라는 글씨가 뜨고
localhost:3000 이라는 url에 뒤에 /page를 붙여주면 각각 페이지를 이동하는걸 볼 수 있다.

---

 

React에서 useState와 같은 Hook을 제공하는것처럼 React-router-dom에서도 Hook을 제공한다.
그중에서 가장 많이 쓰이는 Hook 몇 개만 배우고, 나머지는 공식문서 확인!

• useNavigate
  다른 페이지로 보내고자 할 때 사용할 수 있다. 위 동영상처럼 path를 직접 입력해서 이동할 수도 있지만,
  일반 사용자들이 path를 입력해서 이동하게 하는 서비스는 없다. 보통은 버튼과 같은 이벤트를 활용한다.

Home 컴포넌트 안에 navigate를 선언해 준다. ( useNavigate() )
그리고 Works페이지로 이동할 버튼을 만들어 준다.
onClick // navigate("/works")

프로젝트 실행!

 

실행이 잘 되는 것을 볼 수 있다.
home에 있는 works로 이동하는 버튼을 누르면 works페이지로 이동한다.

 

• useLocation

react-router-dom 을 이용하면 현재 위치하고 있는 페이지에 여러가지 정보를 추가적으로 얻을 수 있다.
페이지 안에서 조건부렌더링 사용하는 등 여러가지 용도로 활용할 수 있다.

 

useLocation 코드는 위에꺼 참고하면 된다.
useLocation을 import한 후 코드작성하는 것 잊지말기!

프로젝트를 실행시킨 후 콘솔창을 확인해 보면 pathname이 제대로 들어온 것을 알 수 있다.

 

• Link
  hook은 아니지만 꼭 알아야할 API이다.
  Link는 HTML태그 중에 a태그 기능을 대체하는 API이다.
  JSX에서 a태그를 사용해야한다면 Link를 반드시 이용해야한다.
  a태그를 이용하면 브라우저가 새로고침 되는데, 새로고침되면 모든 컴포넌트가 리렌더링 되야하고
  우리가 redux나 useState를 통해서 메모리 상의 구축해놓은 모든 상태값이 초기화되기 때문에 이를 방지해야한다.

 

위 이미지는 Works.jsx에 Link를 import하고 콘솔창에서 봤던 pathname값만 불러오도록 템플릿리터럴을 사용했다.

템플릿 리터럴이 궁금하다면 링크✅ 클릭!!

works에 Link를 import하고 아래에 코드를 작성해줬다.
Link태그 사이에 있는 "contact 페이지로 이동" 이라는 글씨글 클릭하면 contact 페이지로 이동한다

 

• Props childern
  어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있다.
  범용적인 박스역할을 하는 사이드바 또는 다이얼로그와 같은 컴포넌트에서 자주 볼 수 있다.
  범용적인 박스역할을 하는 컴포넌트란 크게봤을 때 레이아웃 역할을 하는 컴포넌트라고 볼 수 있다.
  children component를 공부를 하다보면 컴포지션이라는 말을 많이 듣게된다.
  컴포지션은 합성이라는 의미가 있는데, childern props를 가지고 페이지 레이아웃을 만들면서
  개별적으로 존재하는 header, footer, page를 합성해서
  개발자가 의도하는 UI를 만들어주는 레이아웃 컴포넌트를 만들것이다.

 

먼저 shared폴더에 Layout.js파일을 만들어 준다.

// src/shared/Layout.js

import React from 'react';

const HeaderStyles = {
  width: '100%',
  background: 'black',
  height: '50px',
  display: 'flex',
  alignItems: 'center',
  paddingLeft: '20px',
  color: 'white',
  fontWeight: '600',
};
const FooterStyles = {
  width: '100%',
  height: '50px',
  display: 'flex',
  background: 'black',
  color: 'white',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '12px',
};

const layoutStyles = {
  display: 'flex',
	flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '90vh',
}

function Header() {
  return (
    <div style={{ ...HeaderStyles }}>
      <span>Sparta Coding Club - Let's learn React</span>
    </div>
  );
}

function Footer() {
  return (
    <div style={{ ...FooterStyles }}>
      <span>copyright @SCC</span>
    </div>
  );
}


function Layout({ children }) {
  return (
    <div>
      <Header />
      <div style={{...layoutStyles}}>
        {children}
      </div>
      <Footer />
    </div>
  );
}

export default Layout;

Layout.js

 

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Works from '../pages/Works';
import Layout from './Layout';

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

Router.js

더보기를 보면 기본 코드가 나와있으니 참고!

Layout.js에서 
Header와 Footer를 만들어줬다
그리고 레이아웃 컴포넌트에 childern을 props로 받아서
Header와 Footer가 적용되어있는 것을 볼 수 있다.

Router.js에서는
Router 컴포넌트 안에 <Layout> 태그를 넣어준게 전부이다.

 

이렇게 적용된 것을 볼 수 있다.
현재 이미지는 home인데 works나 contact등 다른 페이지를 이동해도 고정으로 있다.

 

지금까지 배운 내용 요약💡

react-router-dom을 이용하면, spa기반 react 프로젝트 안에서 여러개의 페이지를 구현할 수 있다.
Router.js의 Router의 설정에 관련된 코드를 작성하고 최상위 컴포넌트인 App.js에 import해서 사용한다.
react-router-dom은 여러가지 Hook을 제공한다.
페이지에 항상 띄워져있는 header, footer, sidebar 와 같은 것들이 필요하다면 Router에 Layout을 적용해서 childern을 활용할 수 있다.

 

• Dynamic Router
  동적 라우팅
  url 안에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법
  
  

 

Router.js에 아래 코드를 추가해 준다.

<Route path="works/:id" element={<Works />} />

 

 

 

 

 코드를 입력하고 프로젝트를 실행하면 위와 같은 화면을 볼 수 있다.
works/1    works/2    works/3  모두 주소는 다르지만 화면이 같은 걸 볼 수 있다.

 

이제는 useParams 라는 Hook을 이용해서 dynamic route에서 path에 입력된 아이디 값을 가져오는 방법을 알아본다.

dynamic route를 사용하면 엘리먼트에 설정된 값은 같은 컴포넌트를 동일하게 렌더링한다.

 

 

 

// src/pages/Works.js

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

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Works() {
  return (
    <div>
      {data.map((work) => {
        return (
          <div key={work.id}>
            <div>할일: {work.id}</div>
            <Link to={`/works/${work.id}`}>
              <span style={{ cursor: 'pointer' }}>➡️ Go to: {work.todo}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export default Works;

Works.jsx

 

// src/pages/Work.js

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

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;

Work.jsx

 

 

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Works from '../pages/Works';
import Layout from './Layout';
import Work from '../pages/Work';

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          {/* 
						Routes안에 이렇게 작성합니다. 
						Route에는 react-router-dom에서 지원하는 props들이 있습니다.

						path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
						element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
				 */}
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
          <Route path="works/:id" element={<Work />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

Router.jsx

 더보기에 추가및 변경했던 코드들을 넣어놨다. 코드 참고하기!

 

 

위 영상은 최종 works의 모습니다.
글씨 링크를 클릭하면 해당 페이지로 이동하는 것을 볼 수 있다.

 

지금까지 배운 내용 요약💡

React-route-dom을 통해서 Dynamic route를 설정하는 방법을 배움
Dynamic route를 사용할때는 <Route> 태크에 아이디를 넣고 아이디 값은 param에서 useParams를 이용해서 각 컴포넌트 안에서 조회할 수 있다.