[ React ] Route props__match object

양찌·2021년 6월 8일
0

React

목록 보기
1/4

이 포스팅은 아래의 자료를 참고하였습니다.



match

match 객체는 <Route path>가 URL에 어떻게 매치되는지에 대한 정보를 가지고 있습니다.

  • params: (object) 패스의 변경되는 구획에 일치하는 URL로터 읽혀진 key/value의 한 쌍이다.
    (아래 예제를 참고하면 이해가 쉽습니다.)
  • isExact: (boolean) 한 URL 전체가 잘 매치되었는지 boolean 타입으로 보여준다.
  • path:(string) 매치되는데 사용, nested routes를 빌드하는데 유용하다.
  • url:(string) url의 매치된 부분, nested links를 빌드하는데 유용하다.


최종 구현 화면

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

profile
신입 개발자 입니다! 혹시 제 글에서 수정이 필요하거나, 개선될 부분이 있으면 자유롭게 댓글 달아주세요😊

0개의 댓글