1.Router
페이지를 나누고 싶으면 기존에는 htm을 여러개 만들어서 index.html에 연결할 수 있지만, 리액트는 SPA이므로 index.html파일 하나만 사용
->라우터를 이용해서 사용하면 구현 가능
2.Router 설치 및 세팅
1)터미널에 npm install react-router-dom@6 입력하여 설치
2)index.js가서 세팅하기
:import해오고 BrowserRouter태그로 <App/>감싸기
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
3.Router 사용하는 법
1)App.js에서 아래내용 import
import {Routes, Route, Link} from 'react-router-dom'
2)<Rountes>만들고 그 안에 각각 <Route>로 페이지가 들어갈 부분 작성해줌
:<Route path ="/url경로" element ={보여줄 html} />
?<Routes>
<Route path ="/" element={
<div>
<div className='main-bg'></div>
<Container>
<Row>
{
shoes.map(function(a,i){
return(
<Card shoes={shoes[i]}/>
)
})
}
</Row>
</Container>
</div>}/>
<Route path ="/detail" element={
<Detail/>
}/>
컴포넌트로 만들어서 작성 가능하고 혹은 다른파일로 작성해서 가져올 수도 있다.(export/import문법 사용)
function Detail(){
return(
<div className="container">
<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
3)페이지 이동 버튼
<Link to="/">Home</Link>
<Link to="/detail">Cart</Link>
4.리액트의 폴더 구조
:비슷한 js끼리 묶어 두면 좋다.
-컴포넌트 역할 :components 폴더
-페이지 역할 :routes 아니면 pages폴더
-자주 쓰는 함수 들어있는 것은 utils 폴더에 묶기
5.useNavigate 와 Outlet
import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
import에 추가하기
1)useNavigate : 페이지 이동기능을 이용하고 싶을 때 링크 태그 대신에 사용가능
<Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>
<Nav.Link onClick={()=>{navigate('/detail')}}>cart</Nav.Link>
-navigate(1)은 앞으로 가기 , navigate(-1)은 뒤로가기 처럼 숫자를 넣어서 만들 수도 있다.
2)404페이지 만들기
*는 모든 경로를 뜻하고 만들어둔 페이지가 아니면 *경로로 안내해줌
<Route path ="*" element={<div>없는 페이지에요</div>}/>
3)서브 경로를 만들 수 있는 Nested routes
-Route안에 Route를 만들어서 서브 경로를 만들어주는 것을 nested routes라고 한다.
<Route path="/about" element={ <About/> } >
<Route path="member" element={ <div>멤버들</div> } />
<Route path="location" element={ <div>회사위치</div> } />
</Route>
-그리고 서브페이지가 잘 보이려면 바로 상위 페이지에 <Outlet/>을 이용하여 위치를 잘 잡아줘야함
function About(){
return(
<div>
<h4>회사정보임</h4>
<Outlet></Outlet>
</div>
)
}
4)데이터 바인딩 하기
-props 전송하기
<Route path ="/detail" element={<Detail shoes={shoes}/>
-detail.js에서 props파라미터 등록하여 작성하기
function Detail(props){
let {id} = useParams();
return(
<div className="container">
<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6">
<h4 className="pt-5">{props.shoes[0].title}</h4>
<p>{props.shoes[0].content}</p>
<p>{props.shoes[0].price}</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
*detail.js에서 state작성하지 않는 이유 : 수정을 두번해야하는 경우가 생김.
6.URL파라미터
-페이지를 여러개 만들고 싶으면 url파라미터 문법을 사용한다
-path작명할 때 :/아무말 이렇게 사용 가능
-그러면 detail/0 , detail/1, detail/2 이런식으로 잘 보여줌.
-이 파라미터는 여러번 사용이 가능함 detail:/아무말:/아무말2.....
<Route path ="/detail/:id" element={<Detail shoes={shoes}/>
그리고 이 url파라미터를 이용하여 데이터바인딩도 가능하다.
import { useParams } from "react-router-dom"; //import해주고
function Detail(props){
let {id} = useParams(); //App.js에서 사용한 파라미터 가져오기
return(
<div className="container">
<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6">
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
export default Detail;
📚정렬 등의 기능으로 순서가 바뀌어도 원본 순서대로 나타나게 하기.
-find()사용 : 조건식에 맞는 것들을 return
function Detail(props){
let {id} = useParams(); //App.js에서 사용한 파라미터 가져오기
let 찾은상품 = props.shoes.find(function(x){
return x.id == id
});
return(
<div className="container">
<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6">
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
export default Detail;
-filter(): 조건식에 맞는 것 제외하고 return
function Detail(props){
let {id} = useParams(); //App.js에서 사용한 파라미터 가져오기
let 찾은상품 =props.shoes.filter(function(x){
return x.id = id
});
return(
<div className="container">
<div className="row">
<div className="col-md-6">
</div>
<div className="col-md-6">
<h4 className="pt-5">{찾은상품[id].title}</h4>
<p>{찾은상품[id].content}</p>
<p>{찾은상품[id].price}</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
}
https://velog.io/@hahahaday12/React-5-map-find-fliter
React #5 | map, find, fliter
ReactStudy
velog.io
*Cannot read properties of undefined오류 해결하기.->해결중
filter()를 사용하려는데 자꾸 오류가 나서 여러가지 방법을 찾아보다가
x.id와 id의 타입을 찾아보니
x.id는 number , id는 string 였다. 그래서 매칭되지 않는 오류가 발생해버린 것.
https://velog.io/@party3205/React-Cannot-read-properties-of-undefined-reading-%EC%97%90%EB%9F%AC
