styled components에서 조건부 스타일링을 위해 true, false를 문자열로 전달해서 생겼던 에러

문제

styled-components에서 highlight 속성으로 컬러를 구분하고 싶었다

 

먼저 Button은 재사용 컴포넌트이고, styled-components인 StButton을 사용한다

 

 

styled-components에서 prop을 전달할 때는 문자열로 전달했다

 

참고로 React는 컴포넌트에 전달된 props를 HTML 요소로 직접 전달한다

이때, 비표준 속성(즉, HTML 표준 속성이 아닌 사용자 정의 속성)을 HTML 요소에 전달하면 경고가 발생하게 된다

이는 React가 유효하지 않은 HTML을 렌더링하지 않도록 돕기 위해 발생한다

 

 

그런데 버튼의 컬러는 highlight 여부와 상관없이 항상 var(--second-color)가 지정되었다

 

 

해결 방법

styled-components 지식이 부족해서 생긴 에러이다 ,,

말 그대로 html 속성을 문자열로 넘겨주는데, 나는 불린 형태를 문자열로 넘겨주면 다시 불린으로 바꿔서 사용한다고 생각했다 😳

 

해결 방법은 그저 문자열 비교로 조건부로 사용하는 것이다 ㅋㅋ 

그러니 true, false를 문자열로 넘겨주는 것이 아니라, 명시적으로 컬러 이름을 넘겨주었다 (이름짓기가 어려워서 컬러를 이름으로 했다) 

 

문자열 비교를 조건부로 사용

 

 

GPT 거짓말 😵

gpt 거짓말은 어떻게 구별해야하는건지,,  뻔뻔하게 거짓말을 하는구나 ㅍㅡㅍ

ㅡ_ㅡ