[React] Emotion 적용하기 1 - @emotion/styled (Styled Components)

🤷🏻‍♀️ 일반 CSS를 사용하지 않고 Emotion을 사용하는 이유는?

JavaScript로 CSS 스타일을 작성하기에 편하게 설계되었기 때문이다.! (css-in-js)

 

🤷🏻‍♀️ 그렇다면 Emotion 뿐인가?

No! [styled components] 라는 라이브러리도 있음.

npm trends에서 지난 6개월간 다운로드횟수를 살펴보니 사용률은 emotion이 좀 더 높았다.

 

---

@emotion/styled을 먼저 알아보자.

 

👉🏻 설치

// react에서 스타일 API로 직접 태그를 만들기 위해 사용하는 패키지
npm i @emotion/styled
yarn add @emotion/styled

 

👉🏻 설정

emotion을 적용하기 위해서는 babel의 설정을 바꿔주어야하는데,

만약 react를 CRA 프로젝트로 시작했다면 eject을 해준 후 babel을 설정해줘야 한다.

CRA 프로젝트에서도 바로 사용할 수는 있지만 완전하지는 않으니 가능하다면 .babelrc 설정을 권장

 

- CRA Project

// plugin 사용시
npm install --save-dev @emotion/babel-plugin
yarn add --dev @emotion/babel-plugin

 

- Set .babelrc

{
  "plugins": ["@emotion"]
}

 

 

👉🏻 Styled Components

React Component를 직접 Custom하여 사용하기!

 

props를 받아 와서 로직을 설정해줄 수 있다.

import styled from '@emotion/styled';

const MyButton = styled.button`
  color: ${props =>
    props.primary ? 'hotpink' : 'skyblue'};
`;
  
render(
  <Container>
    <MyButton primary>This is My Button.</MyButton>
  </Container>
)

 

props의 값에 따라 다른 결과를 리턴해줄 수 있다.

import styled from '@emotion/styled'

const SideTab = styled.div`
  display: ${({isMobile}) => {
    console.log(isMobile, "isMobile")  // 받아온 isMobile의 boolean 값 출력
    return isMobile ? 'none' : 'block'
  }};
`;

const TestSideTab = styled.div(
  {color: 'purple'},
  props => ({fontSize: props.fontSize})
);

function SideTabComponent() {
  const isMobile = useMediaQuery({maxDeviceWidth: 500});  // boolean
  
  return (
    <SideTab isMobile={isMobile}> 
      <TestSideTab fontSize="200">Hi</TestSideTab>
    </SideTab>
  )
}

 

부모 태그에서 자식 태그의 속성을 변경시켜줄 수 있다. CSS 적용 순서에 유의!

import styled from '@emotion/styled'
      
const MyButton = styled.button`
  color: ${props =>
    props.primary ? 'hotpink' : 'skyblue'};
`;

const Test = styled.div`
  color: hotpink;
  ${MyButton} {color: green;};
  
  & > button {  // 자식의 button만
    margin: 5px;
    border: none;
    background-color: transparent;
    color: aqua;
  }
`;
      
function Compo() {
  return (
    <MyButton>My Color is skyblue</MyButton>
    <Test>Hi I'm Test Component
      <MyButton primary>My Color is green.</MyButton>
    </Test>
  )
}

 

 

Emotion - Styled Components