[FE] emotion css prop pragma 제거하기

🤔 emotion/react 적용기

styled-component, scss 같은 스타일링 라이브러리를 사용하다가 npm trend에서 emotion을 접하고 개인 프로젝트에 적용시켜 보았다.
npm trend : emotion/react vs styled-component

Pragma가 뭔데...?

공식문서랑 기술 블로그를 확인하다보니 emotion에서 css prop을 사용하기 위해서는 파일 상단에 /** @jsxImportSource @emotion/react */ 를 선언해줘야 한다는 점을 알게되었다.

/** @jsxImportSource @emotion/react */처럼 컴파일러 기능을 확장 시키고 전처리 명령을 보낼 수 있게하는 것을 pragma 라고 한다.
하지만 매번 pragma를 입력해주는 것은 꽤나 귀찮았다. 그래서 한번에 적용하는 방법을 찾아보게 되었다.

🤩 문제 해결

emotion 공식문서 : css prop
문제 해결은 생각보다 간단했다. 공식 문서에서 확인할 수 있듯이 babel.config.json을 수정하면 된다.

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

위 코드는 React version (>=16.14.0) 에서 적용할 수 있고, 그 이전 버전이라면 babel preset으로도 간단하게 해결 가능하니 공식문서를 확인하면 좋을 것 같다.

📚 배운 내용

pragma의 개념에 대해서 알 수 있었고, 역시 개발자가 반복 작업에 귀찮음을 느낀다면 다 해결하는 방법이 존재함을 알게되었다. 앞으로 만약 피곤한 작업에 숏컷이 없다면 그 부분을 개선해보는 기회도 가지면 좋을 것 같다.

[국문 참고] 프로젝트에 Emotion 적용기