REACT 실수1 : styled-component에 불리안 prop가 전달이 안되는 문제

REACT styled-component에 prop전달이 안 되는 문제

Received `false` for a non-boolean attribute '변수'

 

2일 동안 안되어서 머리를 감싸 쥐었는데 해결해보니 멍청한 나를 탓해야지 뭐.....

이걸 해결하면서 다른 여러가지 방법이 있다는 것을 알게 되었다.

 

 

해결방법

1. 내가 만든 속성이 기본 속성과 중복하는지 확인. 중복하면 속성 이름 바꿔야 함.

emotion/props.js at main · emotion-js/emotion (github.com)

GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition

 

2. boolean전달이 안된다고 했으니 boolean을 전달할 수 있도록 변형

<Home homeColor={homeColor? 1 : 0}>내용</Home>
<School schoolColor={schoolColr && true}>내용</School>

대강 여러가지 방법으로 불리안으로 변형

 

3. 기존 마크업 속성이 아닌 커스텀 컴포넌트에 전달

<button onClick={onClick} startgame={startgame}></button>

왜 인지 모르겠지만 이따구로 전달했음;

button에는 startgame이라는 속성이 없음... 내가 만든 거지...

<StartButton onClick={onClick} startgame={startgame}>
    {startgame? '게임 중...' : '게임 시작'}
</StartButton>

내가 만든 변수를 전달할 거면 꼭 컴포넌트에 이름을 새로 짓고 전달하자.

(당연한 건데 이상한 실수를 함; 기억 속에 길이길이 남을 듯...)