React 경고 문제 해결

title_thumbnail(React 경고 문제 해결)

Table of Contents

제목: ‘computedMatch’ Prop을 인식하지 못하는 ‘React’ 경고 메시지 수정하기

소개

React와 React Router DOM을 사용하는 경우, “React does not recognize the `computedMatch` prop on a DOM element”라는 경고 메시지를 만날 수 있습니다. 이 경고는 주로 최신 버전의 React Bootstrap과 React Router DOM을 함께 사용할 때 Breadcrumb 컴포넌트를 사용할 때 발생합니다. 이 블로그 글에서는 이 경고의 원인을 알아보고 수정하는 방법을 제공하겠습니다.

경고: ‘computedMatch’ Prop 인식 불가

React 애플리케이션을 검사하면 Breadcrumb 컴포넌트의 루트 `

원인: Breadcrumb 컴포넌트를 잘못 사용함

이 경고는 React Bootstrap의 Breadcrumb 컴포넌트가 Switch 컴포넌트 내에 있는 단순히 `` 컴포넌트만을 예상하기 때문에 발생합니다. Switch 컴포넌트는 일치하는 첫 번째 Route 또는 Redirect 요소를 렌더링하는 데 사용됩니다.

해결 방법: Breadcrumb 컴포넌트 재구조화

이 경고를 해결하기 위해 Breadcrumb 컴포넌트의 구조를 수정해야 합니다. 다음은 수정된 코드입니다:

<Router>
  <Breadcrumb computedMatch={undefined}>
    <Breadcrumb.Item componentClass="span">
      <Link to="/">홈</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item componentClass="span">
      <Link to="/">리액트</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item active={false} componentClass="span">
      <Link to="/name">저자</Link>
    </Breadcrumb.Item>
  </Breadcrumb>
  <Switch>
    <Route path="/:name" component={gridInstance} />
  </Switch>
</Router>

설명: 컴포넌트 재배치

수정된 구조에서는 `` 컴포넌트를 위한 `` 컴포넌트 뒤에 배치했습니다. 이렇게 하면 예상대로 `` 또는 `` 컴포넌트만 `` 컴포넌트 안에 포함되게 됩니다. 컴포넌트 순서를 조정함으로써 React에 의한 경고를 제거하고 Breadcrumb 컴포넌트를 올바르게 렌더링할 수 있습니다.

대안: CSS를 이용한 Breadcrumb

React Bootstrap의 Breadcrumb 컴포넌트를 사용하지 않고 CSS 클래스로 브레드크럼을 만들고 싶다면 다음 방법을 사용할 수 있습니다:

const MyBreadcrumb = () => (
  <Router>
    <div>
      <ol className="breadcrumb">
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/topics">주제</Link>
        </li>
      </ol>

      <hr />
    </div>
  </Router>
);

이렇게하면 Bootstrap v3의 breadcrumb CSS 클래스를 사용하여 브레드크럼을 간단히 만들 수 있고 React Bootstrap의 Breadcrumb 및 Breadcrumb.Item 컴포넌트에 의존할 필요가 없습니다. 이 대체 방법을 사용하면 예상치 못한 동작이나 경고를 피할 수 있습니다.

요약

React Bootstrap의 Breadcrumb 컴포넌트에서 “React does not recognize the `computedMatch` prop” 경고가 발생하는 경우, `` 컴포넌트 내에 오직 `` 컴포넌트만 포함되도록 확인하는 것을 기억하십시오. 또는 CSS 클래스를 사용하여 breadcrumb을 만드는 대안을 선택할 수 있습니다. 이러한 접근 방식을 따르면 경고를 해결하고 React 애플리케이션에서 기능적인 breadcrumb 탐색을 만들 수 있습니다.

‘React does not recognize the `computedMatch` prop on a DOM element’ 경고의 문제를 효과적으로 해결하기 위한 문제 해결 가이드를 마치며 이 블로그 글이 필요한 통찰력을 제공했기를 바랍니다.

참고 자료 :

reactjs