// HashRotuer은 주소창에 #이 추가되어 주소가 깔끔하게 보여지진 않는다. 그래서 최대한 BrowserRotuer를 사용함
BrowserRotuer
BrowerRotuer는 다음과 같이 사용한다.
<BrowserRotuer>태그로 컴포넌트 사용하기
<Rotues>, <Route> 컴포넌트 사용하기
Rotues : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
Rotue : path 속성에 경로, element 속성에는 컴포넌트를 넣어준다
예시
//APP.js
import React from 'react';
import { BrowserRouter, Routes, Route , Link} from "react-router-dom";
import About from './About';
import Home from './Home';
const App = () => {
return(
<div>
<BrowserRouter>
<Routes>
<Route path="/" element = {<Home/>}/>
<Route path="/about" element = {<About/>}/>
</Routes>
</BrowserRouter>
</div>
)
}
export default App;
//Home.js
import React from 'react';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>홈, 그 페이지는 가장 먼저 보여지는 페이지</p>
</div>
)
}
export default Home;
//About.js
import React from 'react';
const About = () => {
return (
<div>
<h1>소개</h1>
<p>이 프로젝트는 리액트 라우터 기초를 실습해 보는 예제 프로젝트입니다.</p>
</div>
)
}
export default About;
이렇게 코드를 짜면 제일 메인화면에는 Home.js가 뜨고
주소창에 /about을 추가하면 About.js가 보여진다
Link
: 클릭하면 다른 주소로 이동시켜 주는 컴포넌트
일반 웹 어플에서 a태그를 사용하여 페이지를 전환하는 것과 비슷하다
다른 점이 있다면 a태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 어플이 들고 있던 상태들을 모두 날리는 반면 Link컴포넌트는 페이지를 새로 불러오지 않고 어플을 그대로 유지한 상태에서 페이지의 주소만 변경해준다
다음과 같이 사용함
<Link to "주소">내용</Link>
아까 작성한 Home에 간단하게 추가하면 아래와 같다.
import React from 'react';
import {Link} from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>홈, 그 페이지는 가장 먼저 보여지는 페이지</p>
<h1><Link to = "/about">소개</Link></h1>
</div>
)
}
export default Home;
링크 생겼다!
저 링크를 누르면 About.js로 넘어간다 새로고침없이!
URL파라미터와 쿼리
페이지 주소를 정의할 때 유동적인 값을 전달할 때도 있음 . 이는 파라미터와 쿼리로 나뉨
파라미터 예시 : /profiles/velopert
쿼리 예시 : /about?details=true
어디에 무엇을 써야하는 규칙은 없지만 일반적으로 파라미터는 특정 아이디 혹은 이름을 사용하여 조회할 때 사용하고,
쿼리는 우리가 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용
URL파라미터
새로 profile.js를 만들어주겠음!
/profile/velopert와 같은 형식으로 뒷부분에 유동적인 username값을 넣어줄 때 해당 값을 props로 받아와서 조회하는 방법에 대해 알아보자
