Refactoring React: 경로 기능을 통한 페이지 경로 관리

React 웹 애플리케이션에서는 페이지 간에 리디렉션이 있는 것이 일반적입니다. 그리고 컨텍스트 외부의 다른 페이지를 가리키는 URL 경로를 빌드하는 React 구성 요소가 있는 것이 일반적입니다. 다음 예와 같습니다.

// a component used across the app

import { settingsRoute } from 'app/routes'

export cons OrderDescription = () => {
  const order = useOrder()

  return (
    <ul>
      {order.products.map(product => (
        <li key={product.sku}>
          <Link href={`/collections/${product.collectionId}/products/${product.id}`}>
            {product.name}
          </Link>
        </li>
      )}
    </ul>
  )
}

이 경우 OrderDescription 구성 요소는 제품 페이지에 대한 경로를 만들고 Link 에 값을 전달합니다.
href 재산.

반면에 제품 페이지는 경로에서 컬렉션 식별자와 제품 식별자를 모두 받았습니다.

// /pages/product.js

export const ProductPage = () => {
  const { collectionId, productId } = useParams()
  const product = useProduct(collectionId, productId)

  return (
    <div />
  )
}

여기서 문제는 OrderDescription가 ProductPage 구성 요소에 대한 URL 경로를 빌드하는 방법을 알아야 한다는 것입니다. 실제로 제품 페이지에 대한 리디렉션 링크를 생성하는 모든 페이지는 이 페이지에 대한 경로를 구축하는 방법을 알아야 합니다.

이런 냄새를 산탄총 수술이라고 합니다. 동일한 지식이 애플리케이션을 통해 서로 다른 위치에 배치될 때 발생하며 각 업데이트는 소스 코드 전체에 퍼져 있는 지식을 변경해야 합니다.

이 예에서 제품 페이지의 매개변수를 변경해야 하는 경우 제품 페이지에 대한 링크를 생성하는 모든 위치를 변경해야 합니다.

이 냄새를 처리하는 한 가지 방법은 제품 링크 구축에 대한 지식을 캡슐화하는 클래스 또는 함수를 만드는 것입니다.

첫 번째 단계는 추상화를 선택하는 것입니다. 이 게시물에서는 함수를 사용하여 페이지 경로를 빌드합니다.

// /pages/product.js

export const productPath = product =>
`/collections/${product.collectionId}/products/${product.id}`

export const ProductPage = () => {
  const { collectionId, productId } = useParams()
  const product = useProduct(collectionId, productId)

  return (
    <div />
  )
}

이제 제품 페이지 경로를 빌드하는 모든 위치를 업데이트하고 제품을 인수로 전달하는 함수productPath를 호출하여 교체할 수 있습니다.

export cons OrderDescription = () => {
  const order = useOrder()

  return (
    <ul>
      {order.products.map(product => (
        <li key={product.sku}>
          <Link href={productPath(product)}>
            {product.name}
          </Link>
        </li>
      )}
    </ul>
  )
}

리팩토링을 만드는 동안 주의를 기울이고 테스트를 계속 실행해야 합니다. 리팩토링 중에 동작을 변경하지 않는 것이 중요합니다. 모든 것이 녹색이면 코드를 커밋합니다.

결론

경로 함수를 사용하여 외부 매개변수를 기반으로 경로 링크를 생성하는 동작을 캡슐화할 수 있습니다. 우리는 해당 경로 매개변수의 소비자를 활용하여 해당 페이지에 대한 경로를 구축하는 방법을 설명하고 이를 통해 애플리케이션 전체에서 지식이 누출되는 것을 방지합니다.

URL 경로를 통해 페이지에 대한 참조를 빌드하는 곳이 한 곳뿐이라 하더라도 함수 호출을 읽는 것이 문자열을 정신적으로 빌드하고 보간하는 것보다 독자가 무슨 일이 일어나고 있는지 이해하는 것이 훨씬 더 쉽기 때문에 이 리팩토링을 제안합니다.