React Route Params의 기본값 설정 – React Router v5에서 정의되지 않은 Params에 대한 기본값 설정하는 방법

제목: React Router: Route Params에 기본값 사용하기

React 함수형 컴포넌트와 React Router v5를 사용할 때, 라우트 파라미터에 기본값을 설정해야 할 필요가 있는 경우가 있습니다. 이 블로그 글에서는 이를 위한 다양한 접근 방법을 살펴보고, 원활한 사용자 경험을 보장하는 방법을 알아보겠습니다. 시작해봅시다!

메소드 1: 대체 값을 제공하기

스위치에 “/users”와 일치하는 다른 경로가 없는 경우, “/users/:userId” 경로에 대해 파라미터 객체의 구조화된 변수에 대체 값을 쉽게 제공할 수 있습니다. userId 변수에 기본값을 할당함으로써 파라미터가 정의되지 않은 경우를 처리할 수 있습니다.

import { useParams } from 'react-router-dom';

export const UserInfo = (props) => {
  const { userId = /* 대체값 */ } = useParams();

  // ... 다른 코드들
}

메소드 2: props.match 활용하기

useParams() 함수 대신에, props.match 객체를 통해 userId 파라미터에 접근할 수도 있습니다. 값의 유무를 확인하고, 기본값이나 대체 로직을 제공함으로써 정의되지 않은 파라미터 문제를 해결할 수 있습니다.

export const UserInfo = (props) => {
  // 0을 기본값으로 가정합니다
  const userId = props.match?.params.userId || 0;

  // ... 다른 코드들
}

메소드 3: 컴포넌트 내에서 기본값 설정하기

기본값을 컴포넌트 내에서 처리하고자 하는 경우, 파라미터 객체를 구조화할 때 직접 기본값을 설정할 수 있습니다. 이 방법을 사용하면, 파라미터가 제공되지 않더라도 유효한 userId 값을 항상 갖게 됩니다.

import { useParams } from 'react-router-dom';

export const UserInfo = (props) => {
  // 1을 기본값으로 가정합니다
  const { userId = 1 } = useParams();

  // ... 다른 코드들
}

대체 값을 제공하거나 props.match를 활용하거나 컴포넌트 내에서 직접 기본값을 설정하는 방법 중 하나를 선택하더라도, 애플리케이션을 견고하고 사용자 친화적으로 유지하기 위해 정의되지 않은 또는 누락된 파라미터를 처리하는 것이 중요합니다.

이러한 기술을 사용하여 React Router를 기반으로 한 애플리케이션이 라우트 파라미터가 사용할 수 없거나 정의되지 않은 시나리오를 우아하게 처리할 수 있도록 할 수 있습니다. 특정 사용 사례를 기반으로 적절한 메소드를 구현하는 것은 예상치 못한 오류를 피하고 애플리케이션의 신뢰성을 향상시키는 데 도움이 될 것입니다.

React Router는 React 애플리케이션의 네비게이션과 라우팅을 처리하기 위한 강력한 도구입니다. 라우트 파라미터와 기본값 설정 방법을 이해함으로써, React 프로젝트에서 더 많은 가능성을 활용할 수 있습니다.

이 블로그 글이 React Router에서 라우트 파라미터에 기본값을 설정하는 다양한 방법에 대해 안내하는 데 도움이 되었기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs