styled-components

styled-components?

• CSS-in-JS 라이브러리 중 하나.
• 컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각하자. 혹은 컴포넌트를 직접 만든다고 볼 수도 있겠다.
• 클래스 이름 짓기에서 자유로운 장점과 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적이다.
• CRA를 설치한 폴더를 VS Code에서 열고 아래 명령어를 입력해서 styled-components 패키지를 설치하자.

yarn add styled-components

• 설치가 다 되었으면, 컴포넌트에 적용시키기 위해 아래 코드를 입력해서 임포트해야한다.

import styled from 'styled-components';

• styled-components는 아래와 같이 변수로 만들어서 사용할 수 있다. `는 작은 따옴표가 아닌 빽틱이다!

const 컴포넌트 이름 = styled.HTML태그`
	CSS 문법
`

• 예를 들어 Mystyled 컴포넌트는 아래와 같이 사용할 수 있다.
• SCSS와 같이 &를 사용해서 상위 요소를 이어 쓸 수 있다.

import './App.css';
import styled from 'styled-components';

function App() {
  return (
    <div>
      <Mystyled>Duckgugong</Mystyled>
    </div>
  );
}

export default App;

const Mystyled = styled.div`
  text-align: center;
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: black;
  &:hover{background-color: #ddd;};
  background-color: yellow;
`;

• 또한, props로 데이터를 넘겨주면 그것을 화살표 함수를 이용해 styled-components가 가져다 쓸 수 도 있다!

import './App.css';
import styled from 'styled-components';

function App() {
  return (
    <div>
      <Mystyled bgColor={'red'}>Duckgugong</Mystyled>
    </div>
  );
}

export default App;

const Mystyled = styled.div`
  text-align: center;
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: black;
  &:hover{background-color: #ddd;};
  //화살표 함수
  background-color: ${(props) => (props.bgColor)};
`;