[React] Received 'false' for a non-boolean attribute 'color' Warning 메시지 해결과정

presenter component에서 styled-component쪽으로 인자를 전달하는 과정에서 warning 메시지를 만났습니다.

해당 오류 메시지를 보면 string 타입을 쓰라고 나와있는데요

오류가 난 부분부터 보도록 하겠습니다.

<S.MyBtn onClick={getData} color={isActive} >GRAPHQQL-API 요청하기</S.MyBtn>

위의 코드는 emotion component에 color이라는 변수에 isActive라는 bool형 값을 전달하는 코드입니다.

처음 위의 warning 메시지를 만났을 때에는 string으로 고치라는 문구가 있어서

<S.MyBtn onClick={getData} color={isActive + ""} >GRAPHQQL-API 요청하기</S.MyBtn>

로 바꿔줬습니다. 바꿔주니 warning 메시지는 사라졌는데 당연하게도 true, false가 아닌 "true", "false"가 전달되어 기능이 작동하지 않는 문제가 생겼습니다.

그렇게 어떻게 해결할 수 있을지 한참을 고민하다 emotion component에 자체적으로 전달되는 color이라는 인자가 있다는 가정을 생각하게 되었고

<S.MyBtn onClick={getData} changeBtn={isActive} >GRAPHQQL-API 요청하기</S.MyBtn>

다음과 같이 변수명을 color에서 changeBtn으로 바꿔주니 정상적으로 작동하면서 warning 메시지도 사라졌습니다.

emotion component에 인자를 전달보낼 때 이런 케이스도 고려를 해야되는구나 생각이 들며 다른 컴포넌트에 값을 보낼 때에도 앞으로는 변수명에도 좀 고민을 더 하면서 작업을 이어가야될 것 같습니다.