React Router 문자열에서 동적 매개변수 치환하는 방법

리액트 라우터 – 문자열에서 동적 매개변수 치환하는 방법

리액트로 구성된 웹 어플리케이션에서 라우팅은 사용자가 다른 페이지나 뷰로 이동할 수 있는 중요한 기능입니다. 리액트 라우터는 리액트 어플리케이션에 라우팅 기능을 제공하는 강력한 라이브러리입니다. 라우팅에서 일반적으로 필요한 작업은 URL 문자열 내에서 동적 매개변수를 치환해야 하는 경우입니다. 예를 들어, /en/homepage와 같은 URL에는 /en이 사용자의 로케일을 의미하는 동적 매개변수가 있습니다. 이 블로그 포스트에서는 리액트 라우터에서 이러한 동적 매개변수를 직접 치환하는 다양한 솔루션을 살펴보겠습니다.

솔루션 1: 리액트 라우터의 generatePath 사용하기

리액트 라우터는 generatePath라는 헬퍼 함수를 제공하여 경로를 동적으로 업데이트할 수 있습니다. 이 함수는 경로 템플릿과 치환해야 할 매개변수 값들을 담은 객체를 인자로 받습니다.

import { generatePath } from 'react-router';

function updatePath(locale) {
  const path = generatePath('/:locale/homepage', { locale });
  this.props.history.push(path);
}

이 예제에서는 generatePath 함수를 사용하여 경로 템플릿인 /:locale/homepage을 새로운 locale 매개변수 값으로 업데이트합니다. 업데이트된 경로는 history 스택에 푸시되어 새로운 URL로 이동하게 됩니다.

솔루션 2: 매개변수 치환을 위한 사용자 정의 함수

만약 더 유연한 방법이나 리액트 라우터 외부에서 매개변수 치환을 처리하고 싶다면, 사용자 정의 함수를 사용할 수 있습니다. 이 함수는 경로 템플릿과 매개변수 값을 담은 객체를 인자로 받아서 매개변수를 해당 값으로 치환합니다.

function replacePathParams(path, params) {
  let newPath = path;

  Object.entries(params).forEach(([key, value]) => {
    newPath = newPath.replace(`:${key}`, value);
  });

  return newPath;
}

console.log(replacePathParams('/:locale/homepage', { locale: 'en' }));
// 출력: '/en/homepage'

이 예제에서는 replacePathParams라는 함수를 정의합니다. 이 함수는 매개변수-값 쌍을 반복하며 경로 템플릿 내의 매개변수를 해당 값을 치환합니다. 업데이트된 경로를 반환합니다.

솔루션 3: 선택적 매개변수 처리하기

경로 템플릿에 선택적 매개변수가 포함된 경우, 사용자 정의 함수를 수정하여 처리할 수 있습니다. :param?과 같은 수정된 경로 템플릿 구문을 사용하여 매개변수가 선택적임을 명시할 수 있습니다.

function replacePathParams(path, params) {
  let newPath = path;

  Object.entries(params).forEach(([key, value]) => {
    newPath = newPath.replace(`:${key}?`, value !== undefined ? value : '');
  });

  return newPath;
}

console.log(replacePathParams('/:locale/user/:name?/:lastname?', {
  locale: 'en',
  name: 'John',
}));
// 출력: '/en/user/John/'

이 예제에서는 수정된 함수가 선택적인 :name과 :lastname 매개변수를 처리합니다. 매개변수 값이 제공되면 경로 템플릿에서 치환됩니다. 그렇지 않은 경우에는 빈 문자열로 치환됩니다.

결론

URL 문자열에서 동적 매개변수를 치환하는 것은 리액트 라우터를 사용할 때 일반적으로 필요한 작업입니다. 이 블로그 포스트에서는 이 목표를 달성하기 위해 다른 방법들을 살펴보았습니다. 리액트 라우터의 generatePath 함수를 사용하든 사용자 정의 함수를 사용하든, 이제 리액트 라우터 기반 어플리케이션에서 동적 매개변수 치환을 효과적으로 다룰 수 있는 도구를 가지게 되었습니다.

적절한 매개변수 치환을 구현하면 어플리케이션의 URL이 최신 상태를 유지하며 사용자에게 원활한 경험을 제공할 수 있습니다. 자신의 요구에 맞는 방법을 선택하고 리액트 어플리케이션에서 동적이고 개인화된 라우트를 생성해보세요.

참고 자료 :

https://stackoverflow.com/questions/47945095/react-router-how-to-replace-dynamically-parameters-in-a-string

같은 카테고리의 다른 글 보기 :

reactjs