Component에 boolean 타입의 props를 넘겨줄 때..

하고 싶었던 것

<ChildrenWrapper booleanTypeProp>
  {children}
</ChildrenWrapper>

...

const ChildrenWrapper = styled.div<{ booleanTypeProp: boolean }>`
  ${({ booleanTypeProp }) => !booleanTypeProp && css`...`}
`;

• ChildrenWrapper에 불리언타입의 props를 넘겨주고, 해당 prop이 false이면 특정 css 속성을 추가해주고 싶었습니다.

문제

• 그런데 의도대로 동작하지 않았습니다.
• booleanTypeProp를 위에서 확인해보면 분명 fasle가 맞는데 css 코드가 추가되지 않았습니다.
• booleanTypeProp이 React state였기 떄문에 setState 시점에 관한 문제인줄 알고 useEffect를 사용하는 등 여러 시도를 했지만 문제가 해결되지 않았습니다.

해결

• 결론부터 이야기하자면, boolean props를 넘겨줄 때 true인 경우에는 brace를 생략할 수 있지만, false는 반드시 brace를 씌워줘야 전달이 된다고 합니다.
• https://bobbyhadz.com/blog/react-pass-boolean-as-prop
• 살짝 변명을 곁들이자면, Component를 정의할 때 props에 대한 타입지정을 명시적으로 해주었고, 이렇게하면 props를 넘기지 않았을 때 에러를 뱉기 때문에 props값이 넘어가지 않을 것이라고는 상상하지 못했습니다..

원인

• 실험해보니 shorthand로 넘기면 무조건 true가 넘어갔다. 즉 위에서 정의된 prop 값과는 무관하게 true가 되는 것이었다.