[React] You have tried to stringify object returned from cssfunction. It isn't supposed to be used directly (e.g. as value of theclassNameprop), but rather handed to emotion so it can handle it (e.g. as value ofcss prop). 에러 고치기

상황

 

emotion 라이브러리를 사용해서 react개발을 할 때 위의 에러가 발생하면

css를 적용한 컴포넌트나 요소가 화면에 렌더링 되지 않는다. 

 

---

에러 메세지 해석

에러 메세지를 해석해 보면 css function에 대입되는 객체를 직접 stringify 하지 말라는 내용이다. 

 

 

나의 경우 css를 컴포넌트 body에 작성했는데

이 css가 return문의 중괄호 안으로 대입되면서 객체 형태가 된다.

지금의 경우는 직접 중괄호 안에 대입했기 때문에 오류가 발생한다. emotion 내부에서 처리를 해주어야 하기 때문이다.

 

---

해결 

1. 태그 내부에 css 속성으로 잘 썼다면 

/** @jsxImportSource @emotion/react */

를 코드 맨 위에 추가하기

 

 

2. 혹시 className 혹은 style 속성에 대입했다면 css 속성으로 바꾸기

 <svg
        style={logoStyle}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 212 38"
      >
      
 // 아래처럼 고치기
  <svg
        css={logoStyle}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 212 38"
      >