yarn add styled-components
import styled from "styled-components";
import styled from "styled-components";
// 1. styled키워드를 사용해서 컴포넌트 생성
// ※ styled. 뒤에는 어떤 html 태그로 생성할지 지정해준다. (form이면 form으로 하는 등.)
const StBox = styled.div`
// css 코드 작성방식과 동일하게 작성
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px;
`;
const App = () => {
// 2. 생성한 styled-components를 JSX에서 html 태그처럼 사용
return <StBox>박스</StBox>;
};
export default App;
yarn add react-router-dom
import { BrowserRouter, Route, Routes } from "react-router-dom";
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// 2. Router 함수 작성
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 새로고침시 화면깜빡임이 되지 않게 해주기 위함이다.
const Router = () => {
return (
<BrowserRouter>
<Routes>
</Routes>
</BrowserRouter>
);
};
export default Router;
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
const Router = () => {
return (
<BrowserRouter>
<Routes>
{/*
Route의 react-router-dom 지원 props 중
1. path는 사용하고싶은 "주소" 넣어주기
2. element는 해당 주소로 이동했을 때 보여주려는 컴포넌트 넣어주기
*/}
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>
);
};
export default Router;
import React from "react";
import Router from "./shared/Router";
function App() {
return <Router />;
}
export default App;
import { useNavigate } from "react-router-dom";
const Home = () => {
const navigate = useNavigate();
return (
<button onClick={() => { navigate("/works"); }}>
works로 이동
</button>
);
};
import { Link } from 'react-router-dom';
const Home = () => {
return
<Link to="/contact">contact 페이지로 이동하기</Link>
};
export default Works;
Dynamic Routes(동적 라우팅) : path에 id와 같은 유동적인 값을 넣어 특정 페이지로 이동하는 기능 구현의 방법
react-router-dom 에 이어서..
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
{/* 추가한 코드 기본 예시 */}
<Route path="about/:id" element={<About />} />
{/* 추가한 코드 변형 예시 */}
<Route path="about/:id" element={<Item />} />
</Routes>
</BrowserRouter>
);
};
export default Router;
useParam : 라우터 사용시 파라미터 정보를 가져와 활용하게 해주는 hook
예제에서는 path값을 가져와 path의 id값을 조회할 수 있게 해주었다.
코드 예시
Home.jsx - 이동 전 화면 컴포넌트 : Link를 사용해 data 배열의 id를 path뒤에 붙여주었다.
import { Link } from 'react-router-dom';
const data = [
{ id: 1, todo: '리액트 배우기' },
{ id: 2, todo: '노드 배우기' },
];
function Home() {
return (
<div>
{data.map((work) => {
return (
<div key={work.id}>
<Link to={`/works/${work.id}`}>
<span> Go to: {work.todo}</span>
</Link>
</div>
);
})}
</div>
);
}
export default Home;
Work.jsx - 이동한 컴포넌트 : useParams로 path값의 id와 data의 id를 비교하여 같은 데이터를 찾았다.
※ 아래 코드에서는 path의 id의 값이 문자형이기 때문에 parseInt를 사용했지만,
id를 uuid로 생성한다면 parseInt를 사용하지 않고 비교해도 된다.
import React from 'react';
import { useParams } from 'react-router-dom';
const data = [
{ id: 1, todo: '리액트 배우기' },
{ id: 2, todo: '노드 배우기' },
];
function Work() {
const param = useParams();
const work = data.find((work) => work.id === parseInt(param.id));
return <div>{work.todo}</div>;
}
export default Work;
const Detail = () => {
// store에 저장한 state 데이터를 가져와 사용함
const globalTodo = useSelector((state) => state.todos.todos);
const param = useParams();
const item = globalTodo.find((elem) => elem.id === param.id);
return (
<StDetail key={item.id}>
ID: <StIdContent> {item.id}</StIdContent>
<StDetailTitle>제목: {item.title}</StDetailTitle>
<StDetailContent>내용: {item.content}</StDetailContent>
</StDetail>
);
};