[FrontEnd/Emotion] emotion error next-dev.js?566e:24 Warning: Received `false` for a non-boolean attribute `visibility`.

1. Emotion의 props 이름에 따른 에러

next-dev.js?566e:24 Warning: Received `false` for a non-boolean attribute `visibility`.

If you want to write it to the DOM, pass a string instead: visibility="false" or visibility={value.toString()}.

If you used to conditionally omit it with visibility={condition && value}, pass visibility={condition ? value : undefined} instead.

다음과 같은 에러가 발생하여 무슨 원인인지 찾아보다가 티스토리 블로그에서 좋은 해결 글을 발견했다. 

https://mygumi.tistory.com/382

Warning Received `true` for non-boolean attribute :: 마이구미

에러를 해석해보면 non-boolean 타입인 속성이 false를 받았다고 하는 거 같은데 값을 string의 형태로 제공하라고 한다. 

내가 이 오류를 경험하게 된 root는 다음과 같다. 

 

나는 Next.js에서 page폴더 안에 page/폴더이름/index.tsx 파일 안에서 페이지를 만들고 있었고 이 안에는 `HomeHeader`라는 컴포넌트가 존재했다. 

 

HomeHeader라는 컴포넌트는 `emotion/styled` 로 만들어진 컴포넌트였고 이 컴포넌트는 visibility라는 이름의 StyledProps라는 props를 받았다. 

 

그러나 계속 위와 같은 warning이 발생했던 것이다. 코드로 보면 다음과 같다. 

 

/page/폴더이름/index.tsx

const Home = () => {
	const [isVisible, setIsVisible] = useState(false);
	const [hasNotify, setHasNotify] = useState(true);

	const handleScrollEvent = throttle(() => {
		if (window.scrollY === 0) {
			setIsVisible(false);
		} else {
			setIsVisible(true);
		}
	}, 300);

이 페이지 안에서는 

<HomeHeader isVisible={isVisible} hasNotify={hasNotify} />

다음과 같이 HomeHeader라는 component를 불러온다. 

 

/component/common/폴더이름/index.tsx

type Props = {
	isVisible: boolean;
	hasNotify: boolean;
};
const HomeHeader = ({ isVisible, hasNotify }: Props) => {
	const { colors } = useTheme();

	return (
		<S.HomeHeaderContainer visibility={isVisible}>
			<span>{isVisible && <OasisLogo />}</span>
			<S.HomeIcons>
				<SearchIco stroke={isVisible ? colors.grey[9] : colors.white} />
				<NotificationIco
					stroke={isVisible ? colors.grey[9] : colors.white}
					fill={hasNotify ? colors.primary.sky : 'transparent'}
				/>
			</S.HomeIcons>
		</S.HomeHeaderContainer>
	)

Props라는 타입에 isVisible 이라는 것이 boolean으로 들어가 있고 S.HomeHeaderContainer 부분에 visibility={isVisible} 로 StyledProps로 들어간다.

emotion은 styled-components와 거의 비슷하다.

html 태그들에는 표준속성과 비 표준 속성이라는 것이 존재하는데 표준 속성은 자체 태그 내에서 가지고 있는 속성이고 비표준 속성은 개발자가 자체적으로 지정해준 props를 의미한다.

따라서 표준 속성의 이름을 개발자가 따로 지정해 주는 비 표준 속성처럼 사용하면 오류가 날 수 밖에 없는데 styled-components source 코드를 살펴보면 내가 아까 지정해준 visibility 라는 속성이 존재한다. 따라서 오류가 났던 것이다.

 

emotion에서 표준 속성으로 가지고 있는 속성들은 다음과 같다. 

https://github.com/emotion-js/emotion/blob/main/packages/is-prop-valid/src/props.js

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

visibility라는 속성이 존재

attribute 이름을 isVisible로 변경해주니 warning이 다 사라졌다.( isVisible 이라는 이름은 emotion에서 미리 지정해 준 표준 속성 안에 없는 이름이기 때문이다. )