[React] CSS emotion 라이브러리

🐾 emotion

📍css를 js로 만들수있도록 도와주는 라이브러리
📍styled 함수
📍import styled from "@emotion/styled";

🤨 이전방식

div tag를 만들고, 클래스 이름이나 id 값을 설정한 후에
css 파일에

선태자 {
    적용시킬 디자인;
}

으로 작성을 했음.
👉👉 클래스이름 및 아이디 이름 설정의 어려움
👉👉 선택자를 똑같게 설정했을 경우 의도치 않은 스타일이 적용(복잡하다)

🤨 emotion styled 방식

css가 적용된 유일한 div 태그를 만들면 되지 않나?

💁🏻‍♀️ 예를들어.

 let Abc
 const Abc = styled.div`display:flex;`;
 const Abc = styled.div('display:flex;');
            <div style="display:flex;"></div>
<Abc/>

 .js파일에서
 let a = <p>안녕</p>; -->jsx
 <a></a>

 function banana(a, b, c, d){
   .....;
   a[0]; // 'abc'
   a[1]; // '5+1'
   a[2]; // 'dd'
}

banana`abc${13-7}5+1${true}dd${10 > 1}`;
banana`abc${6}5+1${true}dd${true}`;
banana(['abc', '5+1', 'dd'], 13-7, true, 10>1)

d01emotion.js

import styled from "@emotion/styled";

function EmotionComponent(){
  return(
    <Wrap>
      <Title>이모션</Title>
      <p>이모션을 활용하여 css가 적용된 컴포넌트 사용</p>
      <Title>다시 사용</Title>
    </Wrap>
  );
}

const Wrap = styled.div`
  border: 3px solid black;
  width: 800px;
  margin: 0 auto;

  & p{
    background-color: aqua;
  }

  &:hover{
    background-color: red;
  }
`;


const Title = styled.h1`
  font-size: 20px;
  color: aqua;
`;


export default EmotionComponent;

❗️ 여기서 잠깐 ❗️
css문법 "&" 해석:
👇 Wrap의 div 속의 p

& p{
}

👇 Wrap의 div 가 hover 되면,

&:hover{
}