[코드숨] 리액트 13기 -8강/1.Emotion(CSS-in-JS라이브러리)

Emotion

CSS-in-JS

• CSS-in-JS에 관해 알아야 할 모든 것

이전까진 CSS를 xxx.css 와 같이 별도의 문서로 관리했지만 요즘은 자바스크립트 코드에서 CSS를 작성합니다. CSS-in-JS라는 명칭은 방법론입니다. 실제로 작성을 돕는 라이브러리는 매우 많습니다. 대표적으로 styled-components와 emotion이 있습니다. 이번 교육에서는 emotion을 사용합니다.

• Emotion 공식 문서

 

1. 설치

npm i @emotion/react @emotion/styled

강의에선 npm i @emotion/core @emotion/styled 로 나왔으나 core => react 로 업데이트됨

 

2. 사용

 1) import 해준다.

import styled from '@emotion/styled'

 

 

 2) 사용하려는 컴포넌트를 만든다(아래 예시에서는 Container, Header)

 

 3)  import 아래쪽에 style 코드를 작성한다 

// emotion/styled
const Container = styled.div({
  margin: '0 auto',
  width: '90%',
});

const Header = styled.header({
  backgroundColor: '#EEE',
  '& h1': {
    fontSize: '1.5em',
    margin: 0,
    padding: '1em .5em',
  }, // Header안에 h1태그 style작성
  '& a': {
    color: '#555',
    textDecoration: 'none',
    '&:hover': {
      color: '#000',
    },
  },
});

---

style 작성 코드 참고) 

css를 사용하는 파일에 import 하거나,

index.html 에 link로 불러오거나 직접적으로 <style></style>로 작성할 수 있음

or 따로 파일로 style적용시킨 것을 컴포넌트로 불러와 사용할 수 있음

import MenuList from './MenuList';
..
return (
    <MenuList>
    ..

+ 컴포넌트에 active됐을 때를 작성하면 

아래와 같이 style 컴포넌트에 ({active})=>({}) 를 props로 내려줘서 적용할 수 있다.

버튼 눌리면 배경바뀌고 안눌린 다른 버튼들은 투명색으로 설정

---

코드작성법 참고)

위 아래 같음