Warning: React does not recognize the 문제 해결 과정

 

현재 내가 담당한 프로젝트에서는 React를 사용하고 있는데,

특정 컴포넌트를 사용할 때 콘솔에 아래 에러가 나오고 있었다.

Warning: React does not recognize the `{넘겨준 props}` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `{넘겨준 props를 소문자로한 이름}` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

동작엔 문제가 없었고 콘솔에만 에러가 찍혔지만 찝찝하니까 해결을 하기로 했다.

 

 

 

---

 

 

 

컴포넌트를 예시로 들면 이런 모양이였다.

 

<MyComponent
    id="my-component-id"
    name="my-component-name"
    className="className"
    isA // 에러는 여기서 발생했다.
/>

 

위처럼 컴포넌트를 사용하면 에러 메시지가 발생했는데,

Warning: React does not recognize the `isA` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isa` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

 

당연히 나는 isA props가 문제일거라 생각하고 컴포넌트 내부에 isA가 사용된 곳을 열심히 뒤졌지만...

isA가 사용된 곳에서는 도저히 문제를 찾지 못했다. 😇

 

 

 

그래서 나는 콘솔 에러를 좀 더 자세히 살펴보기로 했다. 그리고 밑에 부분까지 봤는데...

 

Warning: React does not recognize the `isA` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isA` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Tooltip)
    in Tooltip (created by InnerPopper)

음, 사용한 컴포넌트 안에 react-bootstrap에서 제공하는 tooltip이 있긴 했다. 그런데 tooltip에는 isA props를 전혀 사용하지 않는데...

의문을 품고 tooltip쪽을 살펴보기로 했다.

 

<OverlayTrigger
    placement="bottom"
    overlay={
    	<Tooltip id="my-component-tooltip" {...props}>
        	// ...
        </Tooltip>
    }
>

 

위 코드를 자세히 보니...

 

{...props}를 react bootstrap의 tooltip 컴포넌트에 props로 보내주고 있었다...!

 

당연히 react bootstrap의 tooltip에는 현 프로젝트의 개발자가 직접 만든 isA props를 지원할리가 없었고, 그래서 props를 인식할 수 없다는 에러메시지가 발생한 것이였다. 예전에 해당 코드를 작성한 개발자가 콘솔 에러를 미처 보지 못하고 그냥 넘어간 듯 하다.

 

그래서 {...props}를 제거하여 콘솔 에러가 안뜨게 할 수 있었다. (심지어 ...props의 어떤 props도 사용하지 않아서 그냥 제거하면 됐었다)

 

결과 코드:

<OverlayTrigger
    placement="bottom"
    overlay={
    	<Tooltip id="my-component-tooltip">
        	// ...
        </Tooltip>
    }
>

 

 

Spread 연산자로 props를 몽땅 넘겨줄 때는 자식 컴포넌트에서 props를 모두 사용하는지 점검한 뒤에 보내도록 하는

습관을 가져야 함을 느꼈다.

 

 

 

 

 

 

콘솔 에러는 제거하는 맛이 있는 것 같다.

늘 콘솔 에러를 확인하고, 레거시 코드를 제거하는 일에 더 재미를 붙여야 겠다.