이전 게시물과 이어집니다
React 시작하기
이제는 주식차트 프로젝트로 다시 돌아와, 해당 웹페이지를 위해 만들었던 React 프로젝트로 설명을 이어갈 예정입니다.
react-router-dom
Routuing
먼저, 라우팅은 기본적으로 네트워크에서 어느 경로로 갈지를 결정하는 프로세스를 의미합니다. 주소를 보고 각 주소로 배달을 보내는 것과 비슷한 의미라고 생각하면 좋을 것 같습니다.
즉, 웹페이지에서 라우팅은 사용자가 요청한 주소, URL 을 보고 알맞는 페이지를 찾아서 보여주는 과정입니다.
그 중, react-router는 가장 많이 사용하는 router 방식입니다.
react-router는 html에서 제공하는 < a > 태그와 달리, 페이지를 옮겨 다닐 때 마다 사용자 페이지 전체가 로딩되는 방식이 아니기 때문에, 부드러운 화면전환이 가능합니다.
즉, 신규페이지를 불러오지 않는 SPA에서 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리
준비
npm 이 준비되어 있다면, 설치는 간단합니다.
Terminal에 앞서 세팅했던 react 경로로 들어가 아래 명령어로 라이브러리를 설치합니다.
npm i react-router-domApp.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './Main';
import Item from './Item';
import NotFound from './NotFound';
function App() {
return (
<div>
<BrowserRouter>
{/*<Header />*/}
<Routes>
<Route path="/" element={<Main />}></Route>
<Route path="/item" element={<Item />}></Route>
<Route path="/item/:queryItemId" element={<Item />}></Route>
<Route path="*" element={<NotFound />}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;< BrowserRouter /> , < Routes /> , < Route />
react-router-dom 으로 라우팅을 적용하기 위해서는, 위 3개의 컴포넌트를 사용해주어야 합니다.
1. 라우팅을 적용할 컴포넌트의 가장 상위에 BrowserRouter 컴포넌트로 감싸주어야 합니다.
2. 그 아래 Route 항목을 싸는 Routes 컴포넌트가 필요합니다.
3. Route 컴포넌트는 라우팅할 경로 path와 화면에 출력할 Component 정보가 필요합니다.
<Route path="/item element={<Item />}></Route>예시로, 홈 디렉토리가 localhost:3000/ 일 때,
localhost:3000/item 으로 접속하면 < Item /> 이라는 컴포넌트가 출력됩니다.
라우팅된 페이지 목록
<Route path="/" element={<Main />}></Route>
<Route path="/item" element={<Item />}></Route>
<Route path="/item/:queryItemId" element={<Item />}></Route>
<Route path="*" element={<NotFound />}></Route>| path | Component | 내용 |
|---|---|---|
| / | Main | 메인 페이지, 아무 역할 없음 |
| /item | Item | 아무 종목도 선택되지 않은 빈 차트 보여주는 페이지 |
| /item/[6자리종목코드] | Item | 링크에 있는 6자리 종목코드에 해당하는 주식 종목의 차트 보여주는 페이지 |
| 그 외 | NotFound | 그 외 모든 링크는 잘못된 것이므로 이 페이지로 유도 |
Main.js
import React from 'react';
import {Link} from "react-router-dom";
const Main = (props) => {
return (
<div>
<h3> 메인 페이지입니다. </h3>
<Link to='/item'> 주식차트 보러가기 </Link>
</div>
);
};
export default Main;
Link
react-router-dom 라이브러리에 속해 있는
Link컴포넌트는 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트입니다.
참고로,BrowserRouter컴포넌트로 쌓인 router 구문 내에서는< a />를 사용하면 안되기에, 이< Link />컴포넌트를 사용해야합니다.
NotFound.js
import React from 'react';
const NotFound = () => {
return (
<div>
404 Error
</div>
);
};
export default NotFound;http://localhost:3000/hjnj
http://localhost:3000/item/hello/hs
등 지정되지 않은 형식의 링크 입력 시 모두 NotFound 컴포넌트 출력
Item.js
Item.js 는 코드 내용이 조금 길기 때문에, Router와 관련되어 사용된 기능만 간추려 정리하겠습니다.
...
import React, {useEffect, useState} from 'react';
import { useParams } from 'react-router-dom';
const Item = () => {
const { queryItemId } = useParams();
...
return (
<>
...
</>
);
}useParams
주소를 입력할 때, 경로 내부에 특정 데이터를 넣어 전달할 수 있는데, 그 중 url parameter 형식으로 전달한 데이터를 조회하는 것이
useParam입니다.
예시
<Route path="/item/:queryItemId" element={<Item />}></Route>localhost:3000/item/005930Route가 위와같이 설정이 되었고, 링크를 형식에 맞게 입력했을 때 queryItemId 에는 '005930' 이 입력되고, 이는 useParams() 이 수행해줍니다.
출처
https://shape-coding.tistory.com/entry/React-React-개발환경-세팅하기-React-Router-설치
https://velog.io/@kandy1002/React-Router-Dom-개념잡기
