(styled-components) - Warning: Received `false` for a non-boolean attribute

 

리액트로 개발을 하다가 위 이미지처럼 에러가 발생했다면 그것은 styled-components 라이브러리 때문이다.

 

왜냐하면,

styled-compoenents로 만든 컴포넌트에 props를 전달하면 html의 attribute로써 사용되기 때문이다.

 

즉,

위 이미지의 에러는 html에 show라는 attribute는 boolean 값을 갖는 attribure가 아니기 때문에 생긴 것이다.

(애초에 show라는 attribute도 없지만..)

 

해결 방법은 아래 코드 처럼 show props에 $(달러) 기호를 사용해서 boolean값을 갖는 attribute라고 선언해주면 된다.

 

import React, { useState, useEffect } from 'react'
import styled from 'styled-components';

export default function Nav() {
  const [show, setShow] = useState(false);
	
  // ...code
  
  return (
    <Box $show={show} />
  )
}

const Box = styled.div`
  background-color: ${props => props.$show ? "dodgerblue" : "orange"};
  width: 100%;
  height: 200px;
`;