//React -Router -Dom
//사용하기 위해선 라이브러리를 설치해야 함
//터미널에 yarn add react-router-dom
//1. 페이지(우리는 원래 단일페이지) 컴포넌트 작성 ->다중 페이지
//2. Router.js 파일 생성 .router를 구성하는 설정 코드 작성
// ex) redux 할 때도 설정 파일을 만들어서 주입
//3.App.jsx import하고(2번) 적용 : 주입
//4. 페이지 이동테스트
//React -Router -Dom 의 hook
//1.useNavigate hook
//다른 페이지로 보내고자 할 때 사용할 수 있음
//=>주소창에 직접 입력하는게 아니라버튼이나 링크 눌렀을때 페이지 이동
//2.useLocation
// location =useLocation(); 으로 로케이션을 만든 후
//console.log로 출력해보면 아래와 같은 정보들을 담고 있음
//hash: "" ,key:"apxla7ap", pathname: "/works", search: "",state: null
//이런 정보를 통해 조건부 렌더링이나 현재 위치 파악 등을 할 수 있음
//이번시간 알아야 할 API
//1.LINK
//Link 는 html 태그중에 a 태그의 기능을 대체하는 API
//jsx 에서는 a태그 대신 꼭 Link를 사용해서 구현 해야함
//이유는 a태그는 페이지를 이동하면서 브라우저가 새로고침(refresh)됨
//새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 또한 우리가 디럭스나
//useState를 통해 메모리상에서 구축해놓은 모든 상태값이 초기화 됨 이것은
//성능에 악역향을 줄 수 있고, 불필요한 움직임임
//pages 폴더를 만든 후 About Contact Home Works.jsx 파일을 만듬
//shared 폴더를 만든 후 Router.js 파일을 만듬 => path로 주소 값을 넣어줄거임
//shared/Router.js
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"
// 기본구조 <BrowserRouter><Routes><Route><BrowserRouter/><Routes/><Route/>
//<BrowserRouter>안에<Routes>안에<Route>
//만든 후 다른 컴포넌트에서도 사용하기위해 export default 필쑤
const Router= ()=>{
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="about" element={<About/>}/>
<Route path="coutact" element={<Contact/>}/>
<Route path="works" element={<Works/>}/>
</Routes>
</BrowserRouter>
)
}
export default Router;
//pages/Home.jsx
import React from 'react'
import { useNavigate } from 'react-router-dom'
function Home() {
// navigate를 만든 후 onClick에 함수 안에 navigate(이동할페이지의path)입력
const navigate = useNavigate();
return (
<div>Home
<br/>
<button onClick={()=>{
navigate("/works")
}}>works로이동</button>
</div>
)
}
export default Home
//pages/Works.jsx
import React from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
function Works() {
// navigate를 만든 후 onClick에 함수 안에 navigate(이동할페이지의path)입력
const navigate =useNavigate();
const location = useLocation();
console.log("location :" ,location)
//콘솔엔 location의 여러정보들이 담겨져 있음 ex)현재페이지 주소 등
return (
<div>Works
<br/>
<button onClick={()=>{
navigate("/")
}}>Home로이동</button>
<Link to={"/contact"}>contact로이동</Link>
</div>
)
}
export default Works
//usePrams
//기본구조 const prams = usePrams();
//만약 <Route path="works/:id" element={<Work/>}/> 라는 Route path가있다면
//works뒤에 있는 /:id 의 값을 가져올수 있는 hook임 ex)"works/4"라면
//prams 를 사용해서 4라는 값을 가져올 수 있음 위에선 :id 로 정했기 때문에 prams
// {id:4}라는 값을 갖게 됨
//Dynamic Route=>동적 라우트
//path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법
//예를 들어 works 페이지에 여러개의 work가 보이고 우리가 work마다
//독립적인 페이지를 가지도록 구현하는 방법
//<Route path="works/:id" element={<Work/>}/>
//=>works뒤에 id에 따라 다른 <Work/> 를 보여줄 거임
//ex) shared/data.js
export const data =[
{id:1,todo : '리액트 배우기'},
{id:2,todo : '노드 배우기' },
{id:3,todo : '스프링 배우기'},
{id:4,todo : '자바 배우기' },
{id:5,todo : '장고 배우기' },
{id:6,todo : '파이썬 배우기'}
]
//ex) pages/Works.jsx
import React from 'react'
import { Link } from 'react-router-dom'
import { data } from '../shared/data'
function Works() {
// <Link to={`/works/${item.id}`}> 페이지이동 기능을 함 to에 이동하려는 path입력
return (
<div><h3>할일 목록</h3>
{data.map((item)=>{
return (
<div key={item.id}>
{item.id}
<Link to={`/works/${item.id}`}>
{item.todo}</Link>
</div>)
})}
</div>
)
}
export default Works
//ex) page/work.jsx
import React from 'react'
import { useParams } from 'react-router-dom'
import { data } from '../shared/data';
function Work() {
const params =useParams();
console.log("params",params) //{id:prams.id} 가나옴
//어떤 todo인지 찾아보기
//parseInt => number객체로 변환
//find item안에 있는 조건에 맞는 데이터 찾기
const found=data.find((item)=>{
return item.id === parseInt(params.id);
})
return (
<div>
<h3>할일:{found.todo}</h3>
</div>
)
}
export default Work