이 포스팅은 아래의 자료를 참고하였습니다.
match 객체는 <Route path>
가 URL에 어떻게 매치되는지에 대한 정보를 가지고 있습니다.
match의 정의를 이해하기 이전에 클릭되는 <Link>
컴포넌트 url이 바뀌는 것을 주소창에서 확인합니다.
코딩하기 앞서서 부모, 형제, 자식 관계 정하여, 컴포넌트 관계도를 그려보았습니다. 컴포넌트의 데이터 흐름은 하향식(top-down)임으로 부모 자식간의 관계를 명확하게 하는 것이 중요합니다. 왜냐하면 부모 컴포넌트만이 자식 컴포넌트에게 데이터를 전달할 수 있기 때문입니다.
최종 구현을 하기 위하여 코드를 구현하면 다음과 같습니다.
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<Router>
<h1>Router match</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/mypage">MyPage</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/mypage" component={MyPage} />
<Route exact path="/topics" component={Topics} />
</Switch>
</Router>
</div>
);
}
function Home() {
return <h1>Here is Home.</h1>
}
function MyPage() {
return <h1>Here is MyPage.</h1>
}
그 다음 부모 컴포넌트<Topics>
와 자식 컴포넌트<TopicList>
컴포넌트를 작성 해보겠습니다.
function Topics(props) {
return <TopicList match={props.match}/>
}
function TopicList({match}) {
console.log({match})
return (
<div>
<h3>Topics List View</h3>
<ul>
<li>
<Link to={`${match.url}/topic1`}>Topic 1</Link>
</li>
<li>
<Link to={`${match.url}/topic2`}>Topic 2</Link>
</li>
<li>
<Link to={`${match.url}/topic3`}>Topic 3</Link>
</li>
</ul>
</div>
)
}
export default App;
여기서 <Topics>
에 props로 받은 match 는 무엇일까요?
match 객체는 <App>
컴포넌트에 있는 <Route>
에서 전달 받은 props입니다. 링크를 클릭하였을 때 Route가 <Link to>
와 일치하는 path를 찾고, 일치하면 컴포넌트를 렌더링하는데 그때 받은 props입니다.
<Route>
의 props는 크게 3가지가 있습니다.
- history
- location
- match
Topics에 있는 props를 콘솔로그로 출력하면 다음과 같습니다. props의 key로 history, location, match가 있는 것을 확인할 수 있습니다.
다음은 <TopicList>
에 전달되는 props.match에 어떤값이 있는지 확인해보겠습니다. <TopicList>
는 부모 컴포넌트에서 match라는 props의 값으로 props.match를 전달 받았습니다. 부모 컴포넌트에서 props를 전달 받았음으로 값은 동일한 것을 확인 할 수 있습니다.
그런데 params는 왜 빈 객체를 가지고 있는 것일까요?
다시 한 번 params의 정의를 살펴보면 다음과 같습니다.
params: (object)패스의 변경되는 구획에 일치하는 URL로터 읽혀진 key/value의 한 쌍이다.
params: Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
아직 <Route path>
가 다이나믹하게 바뀌지 않고, 고정된 값을 갖고 있기 때문입니다. 이를 설명하기 위해 <TopicList>
개별 요소 링크를 클릭하면 나오게 되는 <TopicDetail>
컴포넌트를 만들겠습니다.
function TopicDetail({match}){
return (
<div>
<h3>{match.params.topicId}</h3>
<Link to="/topics">Go back to "/topics"</Link>
</div>
)
}
컴포넌트 <TopicDetail>
가 라우팅 될 수 있도록 <App>
컴포넌트 <Switch>
안에 아래의 코드를 추가합니다.
<Route path="/topics/:topicId" component={TopicDetail}/>
<TopicList>
의 개별요소는 <Link>
로 둘러싸여 있습니다. (ex) <Link to={`${match.url}/topic1`}>Topic 1</Link>
) 이 각각의 개별 Link를 클릭하면, 컴포넌트 바로 위에 구현된 <Route path="/topics/:topicId">
의 path와 일치를 인식합니다. 그 결과 <TopicDetail>
컴포넌트를 렌더링 합니다.
그리고 우리는 이제 params의 값을 확인할 수 있습니다. (<TopicDetail>
path의 일부가 <Link to={`${match.url}/topic1`}>Topic 1</Link>
에 의하여 변하기 때문입니다.)
https://codesandbox.io/s/gallant-sid-yho6j?file=/src/App.js:1504-1524