React emotion styled 컴포넌트

이번에는 다른 라이브러리를 소개해보려고 한다.

내 개인적인 생각으로는 material UI의 styled보다 emotion이 더 편한것 같다. 왜냐면 hightlight, auto-complete 기능이 제공 되기 때문이다. 따라서 , camelCase로 바꾸지 않아도 되고 value값을 string화 하지 않아도 된다. (단, vscode-styled-components extension을 vsCode에서 설치해야한다.)

우선 문법을 살펴보자.

// InnerDrawer.style.js
import styled from '@emotion/styled';
import { purple } from '@mui/material/colors';

export const DrawerInnerDiv = styled.div`
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: ${props => {
    console.log(props);
    return props.info && purple[200];
  }};
  h5:hover {
    color: yellow;
  }
`;

// CreateNewPalette.js
import { DrawerInnerDiv } from './assets/styles/innerDrawer.style';
import Typography from '@mui/material/Typography';

function CreateNewPalette(props) {
  const [open, setOpen] = useState(false);
  return (
    <DrawerInnerDiv info={open}>
      <Typography variant="h5">Create Your Own Palette</Typography>
    </DrawerInnerDiv>
  );
}

styled라는 컴포넌트를 emotion에서 import해온다. 그럼 안에 객체가 있는데 element type을 고를 수 있게 되어있나보다. 그래서 dot operating으로 type을 정해주고 백틱을 연다음에 안에 적용될 스타일을 적어준다. 여기서는 안보이지만 실제 vs code 상에서는 앞서 설치한 extension 덕분에 color-coded 되어있다.

근데 백틱이 함수 뒤에 온다니 이 문법은 처음본것 같다. 이 문법은 tagged templates 이라고 한다.(tagged templates)

바로 코드를 보면서 알아보자

var person = 'Mike';
var age = 28;

function myTag(strings, ...strTemp) {
  console.log(strTemp) // ['that ', ' ', ' ', '', raw: Array(4)]
  console.log(strings) // ['Mike', 123, 3412]
}

var output = myTag`that ${ person } ${123} ${3412}`;

함수뒤에 literal template을 입력하면 첫번째 인자는 string만 나오고, 두번째 인자부터는 ${}을 통해 pass 된 인자로 등록된다.

그럼 다시 styled 컴포넌트로 돌아가보자.

보면 nesting 기능 사용가능 하고, 함수를 넘겨주면 CreateNewPalette에서 선언할때 attribute로 넘겨주었던 props을 꺼내서 사용할 수 있다. 사용하는 방법은 함수를 넘겨야 한다. 그럼 첫번째 인자가 props가 된다.

props를 출력해보자.

{
  children: {$$typeof: Symbol(react.element), type: {…}, key: null, ref: null, props: {…}, …}
  info: false
  theme: {}
  [[Prototype]]: Object
}

객체로 넘어오는데 보면 넘겨주었던 info prop이 눈에 보인다. 그래서 open이 되면 글자 색을 purple로 변하게 하였다.

참고로, emotion도 MUI 처럼 theme(hook으로도 가능!)도 이용가능하니 공식문서를 자주 들락날락 거려보자
emotion

자 그럼 요렇게 해서 emotion으로 나만의 styled Component를 만드는 방법을 알아보았다.