1. 배경

리액트 네이티브 프로젝트에서 리액트를 WebView로 활용하고자 하였다. 그러나 React와 React Native 간 상호작용에 제약이 존재하여 다음과 같은 방법을 고민했다.

방법1. ReactNative에서 직접 상호작용 하도록 개발.
방법2. URL 파라미터를 활용한다.

방법 1의 경우에는 iOS와 안드로이드에 각각 webview와 상호작용하기 위한 네이티브 코딩이 필요하다. 상호작용 할 부분이 많다면 고려해볼만 하지만 간단히 한개의 데이터만 전달하면 되므로 방법 2를 채택하였다.

2. 방법

react-router-dom

React 프로젝트에서 라우팅을 하는데 사용하고있는 대표적인 라이브러리이다. 이 라이브러리를 활용하여 Match 객체에 접근하여 URL 파라미터를 가져올 수 있다.

일반적으로 Route를 하기 위한 코드는 아래와 같다.

<Route path="/somepath" component={SomeComponent} />

여기에 path에 :파라미터 를 추가하면 된다.

<Route path="/somepath/:someInfo" component={SomeComponent} />

이렇게 하면 원하는 주소에 someInfo라는 key-value 형식으로 데이터를 전달할 수 있게 된다.

http://localhost:3000/somepath/`파라미터`

아래 결과는 http://localhost:3000/somepath/Hello 주소로 요청을 한 match 객체이다.

match 객체에서 params에 key-value 형태로 원하는 주소 뒤의 값이 전달되었음을 볼 수 있다.

그럼 원하는 페이지에서 props로 match 를 가져오고,

export default function SomeComponent({match}) {    
    return (
        <>
          <div>
              this is some component
          </div>
          <div>
              this is someInfo : {match.params.someInfo}
          </div>
        </>
    )
}

이렇게 사용할 수 있는 것이다.

3. 결과

이상으로 포스팅을 마친다.