Link태그, Switch태그, history에 대하여 알아보자
Detail 페이지의 내용을 Component화 해보자
App.js 내용이 너무 길어지니 따로 파일을 만들고 import해오자
(Detail.js 파일)
import React from 'react';
function Detail(){
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
)
};
export default Detail
// 다른파일에서 자유롭게 import할수 있게됨- src 폴더에 Detail.js 생성
- 항상 맨위에 import React
- Detail 함수 export
(App.js 파일)
import 많은 곳;
import Detail from './Detail.js';
function App(){
return (
<div>
<Navbar></Navbar> (상단메뉴 레이아웃)
<Route path="/">
<Jumbotron></Jumbotron> (Jumbotron 대문 레이아웃)
<>상품3개 카드 레이아웃</>
</Route>
<Route path="/detail">
<Detail/>
</Route>
</div>
)
}이제 배웠으니 컴포넌트가 길어지면 얼마든지 다른 파일로 빼서 저장해두십시오.
(import/export 문법이랑 import React 이것만 잘 기억하시면 됩니다.)
Link 태그로 페이지 이동버튼 만들기
(App.js 파일)
function App(){
return (
<div>
<Navbar>
<Nav.Link> <Link>Home</Link> </Nav.Link>
<Nav.Link> <Link>Detail</Link> </Nav.Link>
</Navbar>
<나머지HTML/>
</div>
)
}▲ Navbar 컴포넌트 안에 Nav.Link 라는 컴포넌트에 여러가지 버튼들이 있습니다.
페이지 이동버튼으로 바꾸길 원하는 글자들에 태그를 감싸보시길 바랍니다.
(Link 태그는 이전 시간에 ‘react-router-dom’과 함께 상단에 import 해온 컴포넌트입니다)
(App.js 파일)
function App(){
return (
<div>
<Navbar>
<Nav.Link> <Link to="/">Home</Link> </Nav.Link>
<Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
</Navbar>
<나머지HTML/>
</div>
)
}▲ 그 다음에 to 라는 속성과 경로 작성.
– Link 태그를 사용하고
– to 속성을 이용해 경로만 지정해주면 됩니다.
어찌보면 a 태그 만드는 것과 매우 유사합니다.
그럼 Detail이라는 글자를 누르면 /detail 경로
Home이라는 글자를 누르면 / 경로로 이동합니다.
useHistory() 이용하여 다른페이지 이동하기
(Detail.js 파일)
import React from 'react';
import { useHistory } from 'react-router-dom';
function Detail(){
let history = useHistory();
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
<button className="btn btn-danger">뒤로가기</button>
</div>
</div>
</div>
)
};
export default Detail useHistory()는 코딩생활을 편하게 해주는 일종의 Hook입니다. (useState 이런거랑 비슷한겁니다)
history 라는 변수엔 큰 object {} 자료가 하나 저장되고
그 object 안에는 페이지 이동 내역 + 유용한 함수가 저장되어있습니다.
<button onClick={()=>{ history.goBack() }} className="btn btn-danger">뒤로가기</button> history.goback() 을 이용하면 페이지가 뒤로감
여기서 질문. 이런걸 어케 알고 코드를 짜나?
라이브러리 사용법은 구글링해야함.
커스텀 페이지로 이동하려면 history.push() 사용하면됨
<button onClick={()=>{ history.push('/') }} className="btn btn-danger">뒤로가기</button> push() 라는 함수를 쓰고 안에 경로를 입력하면 그 경로로 이동
Switch 컴포넌트에 대해 알아보자
import { Switch } from 'react-router-dom'
Switch 태그는 Route를 전부 보여주지 말고 한번에 하나만 보여달라~ 라는 뜻.
Ex)
(App.js 파일)
function App(){
return (
<div>
<나머지HTML/>
<Route exact path="/">
어쩌구
</Route>
<Route path="/detail">
<Detail/> // 1번코드
</Route>
<Route path="/:id">
<div>새로 만든 route입니다</div> // 2번코드
</Route>
</div>
)
}path="/:id"
이 코드는 / 슬래뒤 뒤에 모든 문자가 오면 이 Route로 안내해주세요~ 라는 뜻/
Q. 그럼 /detail로 이동하면 어떤게 보이죠?
A. 1번코드와 2번 코드 모두 보여준다.
리액트 라우터는 그냥 URL 매치되는 것들 전부 다 보여주기 때문!!
이런걸 방지하고 하나의 Route태그만 보여주고싶다면 Route들을 Switch 태그로 감싸면 됨
<Switch>
<Route exact path="/">
어쩌구
</Route>
<Route path="/detail">
<Detail/>
</Route>
<Route path="/:id">
<div>새로 만든 route입니다</div>
</Route>
</Switch>다 감싸면 이제 여러개의 Route가 매칭이 되어도 맨 위의 Route 하나만 보여줍니다.
Link와 history.push의 차이(아마도??) 다시 찾아보기
Link는 기능 없이 클릭하면 무조건이동
history.push는 함수같은 조건을 넣을수있음
