데굴데굴 블로그
thumbnail

React Emotion Css 끄적여 보기

생성일2022. 11. 15.
태그
작성자지한솔

안녕하세요! 오늘은 emotion CSS에 대해 다루어보려 합니다.
최근 개발 과제를 진행하면서 코드의 깔끔함을 느끼지 못했다는 피드백을 받은 저는 styled-components 대신 emotion을 공부해보기로 결정했습니다.
 
먼저, emotion을 사용하기 위해서는 npm i @emotion/react 명령어로 설치해야 합니다. styled-components와 마찬가지로 JSX에서 CSS를 작성할 수 있습니다.
 
예를 들어, input 커스터마이징을 하고자 한다면, 기존의 styled-components를 사용하는 방법은 아래와 같을 것입니다.
 
function App() {
  return (
    <div>
      <h2>Styled-components</h2>
      <div>
        <span>ID</span>
        <input style={{color: 'black'}} />
      </div>
      <div>
        <span>PASSWORD</span>
        <input style={{color: 'red'}} />
      </div>
      <div>
        <span>NAME</span>
        <input style={{color: 'blue'}} />
      </div>
      <div>
        <span>phone</span>
        <input style={{color: 'green'}} />
      </div>
    </div>
  );
}
 
하지만 이렇게 작성하다보면, 코드가 길어지고 유지보수가 어렵다는 문제점이 있습니다. 그래서 emotion을 사용하여 공용 Input 컴포넌트를 만들면 코드를 간결하게 작성할 수 있습니다.
 
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const backColors = {
  default: 'black',
  warning: 'red',
  success: 'blue',
  info: 'green'
}

function Input({ color = "default", onChange }) {
  return (
    <input onChange={onChange}
      css={{
        outline: 'none',
        color: backColors[color]
      }}
    />
  );
}

export default Input;
 
이렇게 작성하면, Input을 불러 사용할 때 color값을 통해 색상이 들어간 input을 호출할 수 있습니다. 또한, 크기와 폰트 사이즈도 수정 가능합니다.
 
const inputSize = {
  small: {
    fontSize: "1rem",
    padding: "4px 8px"
  },
  middle: {
    fontSize: "1.167rem",
    padding: "6px 10px"
  },
  large: {
    fontSize: "1.333rem",
    padding: "8px 12px"
  },
};

function Input({ size = "middle", color = "default", onChange }) {
  return (
    <input onChange={onChange}
      css={{
        outline: 'none',
        ...inputSize[size],
        color: backColors[color]
      }}
    />
  );
}
 
위의 코드에서 inputSize와 backColors라는 객체를 생성하여 입력칸의 크기와 색상을 지정했습니다. 이를 통해 Input 컴포넌트에서는 size와 color를 입력받아 각각의 값에 맞게 스타일을 적용할 수 있습니다.
 
또한, flex: '1 1 auto'를 적용하여 Input 컴포넌트가 자동으로 컨테이너의 크기에 맞게 늘어나도록 설정했습니다.
 
이렇게 만든 Input 컴포넌트를 App 컴포넌트에서 호출하여 사용할 수 있습니다. 이 때, divCss라는 변수를 통해 App 컴포넌트의 스타일을 설정하였습니다.
 
/** @jsxImportSource @emotion/react */
import { divCss } from "./export";
import Input from "./Input/Input";

function App() {

  return (
    <div css={divCss}>
      <h2>데굴데굴 굴러가유.. emotion!!</h2>
      <div>
        <span>DEFAULT</span>
        <Input />
      </div>
      <div>
        <span>SMALL</span>
        <Input size="small" />
      </div>
      <div>
        <span>MIDDLE</span>
        <Input size="middle" />
      </div>
      <div>
        <span>LARGE</span>
        <Input size="large" />
      </div>
      <div>
        <span>SUCCESS</span>
        <Input color="success" />
      </div>
      <div>
        <span>WARNING</span>
        <Input color="warning" />
      </div>
      <div>
        <span>INFO</span>
        <Input color="info" />
      </div>
    </div>
  );
}

export default App;
 
위와 같이 코드를 작성하면, App 컴포넌트 내에서 Input 컴포넌트를 사용하여 입력칸을 만들 수 있습니다. 이렇게 만든 Input 컴포넌트는 크기와 색상을 다양하게 조합하여 재사용이 가능하며, 코드도 간결해지는 장점이 있습니다.
 
notion image
 
어떤가요? 깔끔하게 사용할 수 있을것만 같죠?
 
이상으로 emotion css를 사용하여 Input 컴포넌트를 만드는 예제를 살펴보았습니다. 감사합니다!