개발/react

[react] emotion css 끄적여 보기

한솔방울 2022. 11. 15. 21:53
반응형

안녕하세요 :D

 

오늘은 오랜만에 emotion css를 한번 끄적끄적여 보려 합니다.

 

최근에 개발 과제등을 진행하면서 탈락의 쓴맛을 보고 스스로 피드백을 진행해보니.. 아무래도 깔끔하지 못했던 소스가 아니였을까 싶네요..

 

그 중에서도 가장 문제라 생각하는게 스타일 지정.. 기존에 styled-components를 사용했는데, 너무 많은 styled를 남발했던게 원인이 아닐까 싶습니다.

 

그래서 요즘 styled-components와 호각을 겨룬다는 emotion을 한번 공부하는 시간을 가져보았습니다.

 

새롭게 공부하는 emotion으로는 좀 깔끔하고 정돈된 스타일을 만들어보려고 합니다! 요즘들어 느끼는 기초의 부족함.. css랑 js 강의라도 다시 들어야 할까봐요..

우선 emotion을 사용하려면 설치를 진행해야 합니다

npm i @emotion/react

설치를 진행했다면 emotion을 사용해서 css작업을 진행할 수 있는데요, 우선 react 내에서 style을 사용했을때와 비교해서 진행해 보도록 하겠습니다

 

input을 커스터 마이징을 하고싶습니다. id를 입력받는 칸은 기본, 패스워드는 빨간색, 이름은 파란색, 핸드폰은 초록색의 입력칸을 만들고 싶을때 react 내의 style을 사용한다면

function App() {

  return (
    <div>
      <h2>데굴데굴 굴러가유.. emotion!!</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>
  );
}

export default App;

처럼 구현할 수 있을 겁니다. 하지만 만약 emotion으로 하나의 공용 Input 컴포넌트를 만든다면 좀 더 깔끔하게 구현할 수 있을겁니다.

 

우선 공용 컴포넌트 Input.js는 색상을 입력받을 수 있습니다.

/** @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을 호출할 수 있는 것이죠.

 

여기서 또 이번에는 input박스의 크기와 폰트 사이즈를 수정할 수 있도록 변경해보겠습니다.

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const inputSize = {
  small: {
    fontSize: "1rem",
    padding: "4px 8px"
  },
  middle: {
    fontSize: "1.167rem",
    padding: "6px 10px"
  },
  large: {
    fontSize: "1.333rem",
    padding: "8px 12px"
  },
};

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

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

export default Input;

inputSize라는 객체를 생성해서 사이즈별로 폰트크기와 패딩값을 주었습니다. 이렇게 설정해둔다면 size에 따라 크기와 폰트가 다른 input을 생성할 수 있을 것입니다.

 

Input.js를 조금 더 다듬어서 유용하게 사용이 가능한 input 예제를 하나 만들어보겠습니다.

크기와, 색상을 모두 입력받는 Input 컴포넌트를 완성했습니다. 이렇게 정리를 하니까 매우 깔끔하게 쓸 수 있는 것 같습니다.. 이걸 미리 할걸.. 왜 난.. 이걸.. 이제 알아서.. 크흠..

 

만든 Input.js 파일은 이렇게 생겼습니다.

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const inputSize = {
  small: {
    fontSize: "1rem",
    padding: "4px 8px"
  },
  middle: {
    fontSize: "1.167rem",
    padding: "6px 10px"
  },
  large: {
    fontSize: "1.333rem",
    padding: "8px 12px"
  },
};

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

function Input({ size = "middle", color = "default", onChange }) {
  return (
    <input onChange={onChange}
      css={{
        outline: 'none',
        ...inputSize[size],
        color: backColors[color],
        flex: '1 1 auto',
      }}
    />
  );
}

export default Input;

만든 Input을 호출하는 App.js의 소스는 다음과 같습니다.

/** @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;

어떤가요? 소스가 매우 깔끔하고 Input에도 default를 설정해두어서 재활용하기에 매우 깔끔해진 소스를 확인할 수 있습니다!!

 

이런식으로 자주쓰는, 예를들어 만드는 웹 페이지의 시그니처 버튼도 만들 수 있을 것 같습니다. 이렇게 한다면 소스도 간결하고, 혼자만의 템플릿 생성으로 코드짜는 시간도 단축할 수 있을 것입니다.

 

무엇보다 이제 무지성 styled 난사도 사라질 듯 합니다.. 

 

프로그래머스 코딩테스트도 많으니 저의 깃허브도 많이많이 방문해주세요.. :D

 

한솔방울 깃허브

 

이상 감사합니다!!

반응형