약 5개월 간 CSS-in-JS 라이브러리 중 하나인 Emotion을 사용하여 스타일링하면서 느낀 점을 적어본다.
emotion을 사용하는 이유
큰 이유는 따로 없었고 React를 처음 사용해보면서 CSS 작성을 어떻게 할 지 고민하던 차에 MUI(https://mui.com/)에서 기본 스타일링 엔진으로 emotion을 사용하기 때문에 MUI 사용 시 함께 설치해야해서 설치가 된 김에 사용하기로 하였다.
emotion에는 emotion에서만 볼 수 있는 css prop을 사용하여 스타일링할 수도 있고 styled-components의 영향을 받아서 styled-components처럼 styled로 스타일링할 수도 있다. emotion 공식 문서에서는 css prop이나 styled를 동시에 사용하지 말고 둘 중 하나만 사용할 것을 권장하고 있다. 지금까지는 css prop을 사용해서 스타일링을 했고 styled로는 아직 스타일링을 해보지 않았다. 그래서 아래 좋았던 점과 아쉬웠던 점은 정확히 React에서 emotion의 css prop 사용 시 느낀 점이다.
좋았던 점
-
HTML 태그를 깔끔하게 유지할 수 있다.
많이 사용하는 tailwind-css나 styled-components도 시험삼아 잠깐 사용해보았는데 html opening tag가 너무 길어지거나 실제 element가 무엇인지 바로 파악할 수 없어서 아쉬웠다. emotion은 태그의 css 속성에 css object를 넣어주면 되기 때문에 태그가 크게 길어지지 않았고 실제 element가 무엇인지 쉽게 파악이 가능했다. -
여러 스타일을 한 번에 적용할 때 css object들을 css 속성에 배열로 넣어줄 수도 있고 넣어준 순서대로 적용이 된다.
https://emotion.sh/docs/composition 에 이에 대한 예시가 자세하게 나와있다.
아쉬운 점
-
CRA 사용 시 css prop을 사용할 파일 최상단에 항상 특정 구문을 넣어주어야 한다.
/** @jsxImportSource @emotion/react */이 주석을 넣어주어야 한다.
CRA가 아니라면 babel preset을 이용하면 된다(https://emotion.sh/docs/css-prop). -
특정 인자에 따라 스타일을 바꾸려고 할 때 css object를 반환하는 함수를 만들어야 한다.
styled를 사용하면 props로 받아 더 쉽게 스타일링이 가능해서 편해보인다.
-
스타일은 같지만 다른 element를 지정해야할 경우 조금 불편하다.
컴포넌트를 재사용하여 스타일을 공유할 때, 만들어놓은 컴포넌트는 div이지만 재사용할 때 section이어야 하는 경우, 컴포넌트를 만들 때 prop으로 React.ElementType을 받아 지정하도록 하고 있는데 styled를 사용하면 withComponent나 as prop으로 쉽게 다른 element로 지정할 수 있는 듯 하다(https://emotion.sh/docs/styled).
아쉬운 점에서 2번째와 3번째는 styled와 비교 시 css prop의 아쉬운 점이었다.
향후 사용 여부
emotion 공식 문서에서 컴포넌트 간의 스타일을 공유하는 방법으로 CSS object를 export하여 공유하는 방법과 컴포넌트를 재사용하여 스타일을 공유하는 방법을 소개하고 있다(https://emotion.sh/docs/best-practices). 초반에는 스타일 공유 시 첫번째 방법을 사용하다가 두번째 방법으로 자연스럽게 전환하게 되었는데 컴포넌트를 재사용하여 스타일을 공유할 때 styled로 스타일링하는게 더 편하지 않을까 싶어서 css prop 대신 styled로 전환을 고민하는 중이다.
현재 빠른 구현을 위해 MUI를 사용하고 있는데 생각보다 크게 활용하고 있지 않아서 추후에 MUI를 걷어낼까 생각중이다. MUI가 없다면 굳이 emotion을 사용할 필요는 없기 때문에 개발 중인 웹사이트 특성이나 성능을 고려하여 더 적절한 스타일링 방법이 있다면 갈아탈 의향이 있다. emotion이나 styled-components 같은 runtime CSS-in-JS 라이브러리가 성능에 영향을 미친다는 글을 몇 개 봐서 신경쓰인다. 시간 관계 상 지금은 그대로 개발하고 실제로 큰 영향이 있는지 서비스 완성 후 알아봐야겠다.
