๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 30 ~ Sep 3, 2021
ํ์ฌ ์ํ
https://www.notion.so/wecode/React-2-React-Router-Sass-fdcb50b662814a2c95f600fced8ab42c
๋ผ์ฐํธ ๊ฒฝ๋ก์ ํน์ ๊ฐ์ ๋ฃ์ด ํด๋นํ๋ ํ์ด์ง๋ก ์ด๋ํ ์ ์๊ฒ ํ๋ค.
localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125
pagination ๋์ด ์์ง ์์๋ ์์ฒ๋ผ ๊ฒฝ๋ก parameter๊ฐ ์๋ค๋ฉด ํด๋น ํ๋ฉด์ผ๋ก ์ด๋ ๊ฐ๋ฅ
2, 45, 125๊ฐ ๊ฐ๊ธฐ ๋ค๋ฅด id ๊ฐ์ ์ ์ฅํ๋ ๋งค๊ฐ ๋ณ์
<Router>
<Switch>
<Route exact path='/product/:id' component={productDetail} />
</Switch>
</Router>
:
๋ path parameter ๊ฐ ์ฌ ๊ฒ์์ ์๋ฏธid
๋ ํด๋น path parameter ์ ์ด๋ฆ์ ์๋ฏธ (๋ณ์ ๋ช
์ ์ง๋ฏ์ด ์์์ ์ด๋ฆ ์ง์ ๊ฐ๋ฅ ex :productId
)onClick
event ์ ๋ฐ์ํ๋ push ํจ์๋ฅผ ํตํด /product/1
๋ก ์ด๋/product/1
๋ก ๋ณํ๋ฉด Route component์ ์ ์๋์ด ์๋ path='/product/:id
์ ๋ฐ๋ผ ProductDetail
component๊ฐ mount๋จProductDetail
component์์๋ BE์ id๊ฐ 1์ธ item์ ๋ํ ์ ๋ณด๋ฅผ ์์ฒญsetState
ํจ์๋ฅผ ํตํด state์ ์ ์ฅํ๊ณ , ์ด๋ฅผ ํตํด ์์ธ page UI render๋จ์ ์ธ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํด URL์ id ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋ค.
Routes.js
์ Route
component์ component
property์ ์ง์ ์ฐ๊ฒฐ๋์ด ์๋ ํ์ component๋ history
, location
, match
3๊ฐ์ง ๊ฐ์ฒด๋ฅผ props๋ฅผ ํตํด ์ ๊ณต ๋ฐ๋๋ค.
์๋ ProductDetail
component๋ Route component๋ฅผ ํตํด 3๊ฐ์ง ๊ฐ์ฒด๋ฅผ ์ ๊ณต ๋ฐ๋๋ค.
// Routes.js
<Route exact path='/product/detail/:id' component={ProductDetail} />
// ProductDetail.js
render() {
console.log(this.props) // { history: {}, location: {}, match: {}, ... }
return (
...
);
}
history
๊ฐ์ฒด๋ ํ์ด์ง ์ด๋์ ์ํ ์ฌ๋ฌ method๋ค์ ๋ด๊ณ ์์ ex push
location
๊ฐ์ฒด๋ ํ์ฌ url ๊ฒฝ๋ก์ ๊ดํ ์ ๋ณด๋ฅผ ๋ด์match
๊ฐ์ฒด๋ path parameter ์ ๊ดํ ์ ๋ณด๋ฅผ ๋ด์ํ์ด์ง ์ด๋์ ์ํด ์ฌ์ฉํ๋ push ํจ์๋ history ๊ฐ์ฒด๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ
ex onClick={ () โ this.props.history.push('/main') }
Q ๊ทธ๋ผ ๊ทธ๋ฅ link ๊ฑธ๋ฉด ๋๋ ๊ฑฐ ์๋๊ฐ?
A link๋ ์๋ก๊ณ ์นจ๋๊ณ , ๋์ routing์ log๊ฐ ๋์ ๋จ
history
, location
, match
๋ Route component๊ฐ component property์ ์ฐ๊ฒฐ ๋์ด ์๋ ์ปดํฌ๋ํธ์ ์ ๊ณตํ๋ ๊ฐ์ฒด์ด๊ธฐ ๋๋ฌธ์ component๊ฐ Route์ ์ฐ๊ฒฐ๋์ด ์์ง ์์ผ๋ฉด withRouter
ํจ์๋ฅผ ์ฌ์ฉํด์ผ ํจ
import { withRouter } from 'react-router-dom';
class Payment extends React.Component {
render() {
console.log(this.props); // { history: {}, location:{}, match:{}, ... }
// Payment component๋ Router์ ์ฐ๊ฒฐ๋์ด ์์ง ์์์ history, location, match ๊ฐ์ฒด๋ฅผ ์ ๊ณตํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ withRouter๋ฅผ ์ ์
return(
...
)
}
}
export default withRouter(Payment);
path parameter๋ก ๋ช
์ํด๋ ๊ฐ์ match ๊ฐ์ฒด์ ๋ด๊ธฐ๊ธฐ ๋๋ฌธ์ match
ํจ์๋ก URL์ ๋ด๊ฒจ์๋ id ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋ค.
๊ทธ๋์ componentDidMount
method์ ํด๋น id๋ฅผ ์
๋ ฅํด server์ ์์ฒญํ์ฌ ์ํ๋ ์ ๋ณด๋ฅผ ๋ฐ์ ์ ์์
// ProductDetail.js
// current URL -> localhost:3000/product/1
class ProductDetail extends React.Component {
...
render() {
console.log(this.props.match.params.id) // 1
return (
...
);
}
}
componentDidMount() {
fetch(`${API}/${this.props.match.params.id}`)
.then(res => res.json())
.then(res => ...);
this.props.history.push("/product/1")
๋ก ์์ธ page๋ก ์ด๋"http://localhost:3000/product/1"
๊ณผ ๊ฐ์ด ๋ณ๊ฒฝthis.props.match.params.id
์์ ๊ฐ์ ธ์ดcomponentDidMount() {
const id = this.props.match.params.id
fetch(`http://123.456.123.123:8000/products/${id}`) // 1
.then(res => res.json())
.then(res => this.setState({ data: res }))
}
res
)๋ฅผ ์ปดํฌ๋ํธ์ state ๊ฐ์ฒด์ ์ ์ฅrender