nameSearch 에러 recognize the nameSearch prop on a DOM element

recognize the nameSearch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase namesearch instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

==> 

 

 

React에서는 DOM 요소에 전달된 props 중, HTML 표준 속성이 아닌 커스텀 속성이 자동으로 걸러지거나 경고가 발생할 수 있습니다. 예를 들어 nameSearch와 같은 커스텀 속성은 표준 HTML 속성이 아니므로 직접 DOM에 적용하려고 하면 경고가 발생하게 됩니다.

 

해결책

경고를 피하기 위한 두 가지 방법이 있습니다:

1. 커스텀 속성을 소문자로 변환하여 DOM에 적용: 커스텀 속성을 DOM 요소에 남겨두고 싶다면 속성명을 모두 소문자로 변환해야 합니다. React는 소문자로 된 속성만 DOM에 나타납니다. 그러므로 nameSearch를 namesearch로 변경하면 React는 이를 DOM 속성으로 인식합니다.
2. DOM 요소에 전달하지 않기: 부모 컴포넌트에서 DOM 요소로 잘못 전달된 속성을 걸러냅니다. 만약 특정 props가 DOM 요소에 전달되지 않도록 하려면, 해당 속성을 걸러내서 DOM 요소가 아닌 다른 용도로만 사용하게 할 수 있습니다. 예를 들어, nameSearch를 직접 사용하고 DOM 요소에는 전달하지 않도록 할 수 있습니다. nameSearch를 별도로 처리하고, 나머지 props만 DOM에 전달합니다. 이를 통해 nameSearch는 DOM 요소에 노출되지 않고 내부 로직에서만 사용됩니다.

 

2. 예시 코드 

const MyComponent = ({ nameSearch, ...rest }) => {

  // nameSearch를 사용하되, 나머지 props는 DOM에 전달
  return (
    <div {...rest}>
      Searching for: {nameSearch}
    </div>
  );
};