props.match

오젼·2023년 6월 5일
0

React Router에서 사용되는 속성

React Router는 URL과 일치하는 컴포넌트를 렌더링하고, 이때 해당 컴포넌트에 props로 여러 속성을 전달한다.

props.match는 이러한 속성 중 하나로, 현재 URL과 일치하는 라우팅 규칙에 대한 정보를 담고 있다.

ex)

  • props.match.path: 현재 라우팅 규칙의 경로 정보를 포함
  • props.match.url: 현재 URL과 일치하는 경로 정보를 포함
  • props.match.params: URL에서 동적으로 추출된 매개변수를 포함하는 객체. 예를 들어, /users/:id와 같은 경로 규칙에서 :id에 해당하는 값을 props.match.params.id로 확인할 수 있다.
    그러니까 props.match.params.동적매개변수명 이런식으로 동적매개변수를 추출해서 사용할 수 있음

props.match.path vs props.match.url

props.match.url은 현재 실제 경로를 나타내는 반면, props.match.path는 경로의 패턴을 나타내며 동적인 값을 추출하기 위해 사용된다.

  • props.match.url: props.match.url은 현재 경로를 나타내는 문자열이다. 예를 들어, 현재 경로가 "/users/123"이면 props.match.url은 "/users/123"이다. 이 값을 주로 링크 또는 리다이렉션 시에 사용한다.

  • props.match.path: props.match.path는 현재 경로의 패턴을 나타내는 문자열이다. 예를 들어, 경로 패턴이 "/users/:id"인 경우 props.match.path는 "/users/:id"이다. 이 값은 경로를 설정할 때 사용되며, 동적인 경로 세그먼트의 값을 동적으로 추출하기 위해 주로 사용된다.

0개의 댓글