새로운 프로젝트 (emotion-diary) 생성
npx create-react-app emotion-diary
React Router
페이지 라우팅을 사용하기 위해 CSR(Client Side Rendering)을 도와주는 라이브러리
npm install react-router-dom@6
- 명시적으로 ver 6 을 설치
- 설치 완료 확인은 package.json 에서 확인 가능
각각의 페이지가 될 스크립트 파일 만들기
- Home.js
const Home = () => {
return (
<div>
<h1>Home</h1>
<div>이곳은 HOME 입니다.</div>
</div>
);
};
export default Home;- New.js
const New = () => {
return (
<div>
<h1>New</h1>
<div>이곳은 일기 작성페이지 입니다.</div>
</div>
);
};
export default New;- Edit.js
const Edit = () => {
return (
<div>
<h1>Edit</h1>
<div>이곳은 일기 수정페이지 입니다.</div>
</div>
);
};
export default Edit;- Diary.js
const Diary = () => {
return (
<div>
<h1>Diary</h1>
<div>이곳은 일기 상세페이지 입니다.</div>
</div>
);
};
export default Diary;1. 브라우저 URL & react 앱 연결
BrowserRouter
(1) BrowserRouter, Routes, Route 세팅
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
function App() {
return (
// <BrowserRouter>로 감싸져있는 부분은 브라우저의 url과 맵핑될 수 있음
<BrowserRouter>
<div className="App">
<h2>제목입니다.</h2>
{/* url에 따라 바뀔 부분을 Routes 컴포넌트로 감싸주기 */}
<Routes>
{/* 실질적으로 브라우저 url과 컴포넌트를 맵핑시켜중 */}
<Route />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;(2) Home 컴포넌트 연결
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// 페이지 역할 js 임포트
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";
function App() {
return (
// <BrowserRouter>로 감싸져있는 부분은 브라우저의 url과 맵핑될 수 있음
<BrowserRouter>
<div className="App">
<h2>제목입니다.</h2>
{/* url에 따라 바뀔 부분을 Routes 컴포넌트로 감싸주기 */}
<Routes>
{/* 실질적으로 브라우저 url과 컴포넌트를 맵핑시켜중 */}
<Route path="/" element={<Home />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
- Route.Provider 컴포넌트 아래에 Home 컴포넌트가 추가되어있음
- /write같이 맵핑되지 않은 주소를 입력하면 다시 아무 컴포넌트도 뜨지 않고,
/write와 일치하는 Route가 없다는 경고가 뜸
(3) New 컴포넌트 연결
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// 페이지 역할 js 임포트
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";
function App() {
return (
// <BrowserRouter>로 감싸져있는 부분은 브라우저의 url과 맵핑될 수 있음
<BrowserRouter>
<div className="App">
<h2>제목입니다.</h2>
{/* url에 따라 바뀔 부분을 Routes 컴포넌트로 감싸주기 */}
{/* Routes 바깥에 있는 <h2> 부분은 url이 변경되도 바뀌지 않고 유지됨 */}
<Routes>
{/* 실질적으로 브라우저 url과 컴포넌트를 맵핑시켜중 */}
{/* path가 / 일 때, Home 컴포넌트를 맵핑시켜줌 */}
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;(4) Edit, Diary 컴포넌트 연결
- 동일하게 아래 Route 추가
<Route path="/Edit" element={<Edit />} />
<Route path="/Diary" element={<Diary />} />2. 페이지 이동
Link
// RouteTest.js
/*
RouteTest 컴포넌트 역할
리액트 라우터에서 제공하는 scr방식으로 컴포넌트를 이동시켜줌
*/
/* Link import */
import { Link } from "react-router-dom";
const RouteTest = () => {
return (
<>
/* 이동할 url을 to에 적어줌 */
<Link to={"/"}>Home</Link>
<br />
<Link to={"/diary"}>DIARY</Link>
<br />
<Link to={"/new"}>NEW</Link>
<br />
<Link to={"/edit"}>EDIT</Link>
<br />
</>
);
};
export default RouteTest;import RouteTest from "./components/RouteTest";
// App.js
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>제목입니다.</h2>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/Edit" element={<Edit />} />
<Route path="/Diary" element={<Diary />} />
</Routes>
{/* a태그를 사용하면 새로고침 되면서 이동됨 */}
{/* <a href={"/new"}>[새로고침]new 로 이동</a> */}
<hr />
<hr />
<hr />
// RouteTest 컴포넌트 임포트
<RouteTest />
</div>
</BrowserRouter>
);
}
- Link를 사용하여 컴포넌트 전환 시, 새로고침이 없고 빠르게 화면 전환이 되는 것을 확인할 수 있음.
주의
{/* a태그를 사용하면 새로고침 되면서 이동됨 */} <a href={"/new"}>new 로 이동</a>
- a 태그는 외부 사이트 이동 시에만 사용
개발자도구 - Components로 확인해보기
- /New로 이동 시 New 컴포넌트로 바뀜
- 페이지 이동 X -> 페이지 역할을 하는 컴포넌트를 노출시키고, url도 변경하여 페이지가 이동한 것 처럼 보이게 하는 것
