프로그램/React-Native
nameSearch 에러 recognize the nameSearch prop on a DOM element
보통인간
2024. 9. 11. 09:46
반응형
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에 적용하려고 하면 경고가 발생하게 됩니다.
해결책
경고를 피하기 위한 두 가지 방법이 있습니다:
- 커스텀 속성을 소문자로 변환하여 DOM에 적용: 커스텀 속성을 DOM 요소에 남겨두고 싶다면 속성명을 모두 소문자로 변환해야 합니다. React는 소문자로 된 속성만 DOM에 나타납니다. 그러므로 nameSearch를 namesearch로 변경하면 React는 이를 DOM 속성으로 인식합니다.
- 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>
);
};
반응형