[개발공부 44일차] Redux Router DOM

React Router DOM

예시로 src 에서 page폴더를 만들고 쓸 페이지를 적용시킴

shard 폴더 내에 route 생성

route 는 path와 함께 사용 , path = { 페이지 경로 }

useNavigate() : 이벤트에 적용해서 사용할 수 있는 훅

useLocation() :

Link to{ 페이지 경로 } = html a태그 대신함

동적 라우팅 ( dynamic route )

path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구동하는 방법

// Works.jsx
const data = [
{
	id: 1,
	todo: '리액트 배우기'
},
{
	id: 2,
	todo: '리액트 배우기'
},
{
	id: 3,
	todo: '리액트 배우기'
},
...
]

function Works(){
	return(
	data.map(item=>{
		return(
	<div **key ={item.id}** // map을 사용했을때 unique한 key가 필요함.
	{item.id} {item.todo}
			)
		}
	)
}

Parameter

식별자를 받아 하위 페이지로 이동 할 수 있도록 함

...
<Route path = "works/**:id(식별자)**" element={<Work />} />

useParams() = > 훅

// Work.jsx
import {useParams} from "react-router-dom"

function Work(){
	const params = useParams();
	console.log('params', params)

return <div>하위페이지입니다!</div>;

}

export default Work;

// params {id : '1'}

동적으로 적용하려면

//Works.jsx
{data.map((item)=> ...

<Link to={`/works/$(item.id)`} </Link>
//상대 경로, 절대 경로 찾아봐야될거같음.

만약 데이터를 최적화 해주려면

Works.jsx 에 있는 const data = [ … ] 들을 shared(data.js 형태)로 옮겨서 export , import(Work, Works) 로 보내고 받을 수 있음.

foundData 찾기

const foundData = data.find(item)⇒{
	return item.id === params.id // == 동등연산자, === 일치연산자
}

위 코드는 실행 시 오류가 나타남. params.id 가 문자열이기 때문

//수정된 코드
const foundData = data.find(item)⇒{
	return item.id === parseInt(params.id) 
}

위 코드를 이용하여 {foundData.todo} 를 하게되면 해당 id의 내용을 찾는것이기때문에 id에 맞는 내용의 데이터를 찾을 수 있음.