React Router v4에서 Router Component에 Custom Props 전달하기

제목: React Router v4에서 라우터 컴포넌트에 커스텀 속성 전달하기

React Router v4를 사용하여 다중 페이지 앱을 구축할 때, 자식 컴포넌트에 속성을 전달하는 것은 때로는 도전이 될 수 있습니다. 이 속성들에 접근하는 일반적인 방법 중 하나는 this.props.route 객체를 통해 접근하는 것입니다. 그러나 일부 개발자들은 이 객체가 정의되지 않는다고 보고하였습니다.

이 블로그 글에서는 React Router v4에서 라우터 컴포넌트에 커스텀 속성을 전달하는 방법과 자식 컴포넌트에서 이러한 속성에 접근하는 데 문제가 있을 경우 해결 방법을 알아보겠습니다. 시작해 봅시다!

render 속성을 이용하여 속성 전달하기

속성을 전달하는 권장된 방법 중 하나는 Route 컴포넌트에서 제공하는 render 속성을 활용하는 것입니다. 이는 내부적으로 렌더링과 래핑을 수행하여 속성이 올바르게 자식 컴포넌트에 전달되도록 합니다.

import React from 'react';
import { Route } from 'react-router-dom';

const MyComponent = (props) => {
  // 부모 컴포넌트에서 전달된 속성에 접근하기
  console.log(props.test);

  return (
    <div>
      <h1>자식 컴포넌트</h1>
    </div>
  );
};

const App = () => (
  <Route exact path="/" render={(props) => <MyComponent test="안녕" {...props} />} />
);

export default App;

자식 컴포넌트에서 속성에 접근하기

부모 컴포넌트에서 랜더링 속성을 통해 속성이 전달되면, 자식 컴포넌트에서는 this.props를 이용하여 해당 속성에 접근할 수 있습니다. 다음 예제를 살펴보겠습니다:

import React from 'react';

const MyComponent = (props) => {
  console.log(props.test); // 부모 컴포넌트에서 전달된 속성에 접근하기

  return (
    <div>
      <h1>자식 컴포넌트</h1>
    </div>
  );
};

export default MyComponent;

props.test를 로깅함으로써 부모 컴포넌트에서 전달된 속성의 값을 확인할 수 있습니다. 문제가 발생하면 구현을 확인하고, 기본 라우터 속성을 전달하기 위해 {...props}를 포함하는지 확인하십시오.

결론

React Router v4에서 라우터 컴포넌트에 커스텀 속성을 효율적으로 전달하는 방법은 Route 컴포넌트에서 제공하는 랜더링 속성을 활용하는 것입니다. 이 단계를 따라가면 자식 컴포넌트에서 전달된 속성에 성공적으로 액세스할 수 있습니다.

예기치 않은 동작을 방지하기 위해 기본 라우터 속성을 전달할 때 {...props}를 포함하는 것을 잊지 마십시오.

React Router v4의 강력한 기능을 활용하여 다이나믹하고 상호작용적인 다중 페이지 앱을 손쉽게 만들어 보세요!

참고 자료 : 

reactjs