webpack으로 세팅한 프로젝트에 EmotionJS 설치하기

사용자가 쉽게 커스텀하고 이용이 가능한

input 라이브러리를 만들어보려고 한다.

 

input하나만드는데

보일러 플레이트가 많은

CRA는 설치하기 싫었고

CRA없이 초기세팅을 웹팩으로 빌드했다.

 

css는 emotionJS를 사용하기로 결정했다 

 

css in js를 구현할 때 jsx문법 내에서

style={{}}로 하는것 보단 css={{}}로 작성하는게 더 익숙했기 때문이다.

(현재 진행중인 링크게더 프로젝트에서 쓰고 있다.)

 

딱히 성능상의 유의미한 차이는 없다ㅋㅋ...

 

 

 

웹팩세팅 관련 글은 다음에 다뤄보도록 하겠다. (길어질거 같음..)

 

npm i -D @emotion/react @emotion/styled

emotion 패키지를 설치해주고

 

typescript를 사용하는 경우

tsconfig.json의 컴파일러 옵션에

{
  "compilerOptions": {
    ...
    "jsxImportSource": "@emotion/react",
    ...

    }
}

한줄 추가해주자.

 

마지막으로 사용하고자하는 컴포넌트에서 

/** @jsx jsx */
import { css, jsx } from '@emotion/react';

가장 상단에

위 두줄을 적어놓은 후에 (주석이라고 빼면안돼요!!)

 

 

jsx의 style 속성처럼 css를 넣은 후 

렌더링 해보자

/** @jsx jsx */
import { css, jsx } from '@emotion/react';

const App = () => {
  return (
    <div
      css={{
        width: '100%',
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <div css={{ color: 'red', fontWeight: 'bold', marginTop: ' 50px' }}>
        이모셔어어언
      </div>
    </div>
  );
};
export default App;

 

 

아주 강렬한 이모션이 생겼다.

 

 

 

만약 

/** @jsx jsx */

이 코드를 모든컴포넌트 상단에 넣어야 되는게 싫다면

 

 

npm install @emotion/babel-preset-css-prop

이 패키지를 설치한 후에

.babelrc파일의 presets에 

한 줄 끼워넣어주자.

 

 

Globalstyle도 입맛에 맞게 설정해주길!

import { Global, css, jsx } from '@emotion/react';

export const GlobalStyle = () => (
  <Global
    styles={css`
      html {
        font-size: 16px;
      }

      body {
        font-family: 'Noto Sans KR', sans-serif;
      }

      select,
      input,
      button,
      textarea {
        border: 0;
        outline: 0 !important;
      }
    `}
  />
);