[React]styled-components

yarn add styled-components

styled-components란?

CSS-in-JS 라이브러리 중 하나이며 JS로 작성된 컴포넌트에 스타일을 직접 입히는 방식이다.

장단점

👍 중복되지 않는 class 명을 생성해 작용하기 때문에 클래스에 따른 css 혼선을 방지할 수 있다.
👍 컴포넌트의 props를 전달받아 사용하는 것이 가능하며 기존 Compoent에 스타일을 추가하는 것이 가능하다
👍 SASS의 모든 문법이 사용가능하진 않지만 중첩 스코프 규칙을 사용할 수 있다.

👎 styled-compoent를 파일 내부에 작성하기 때문에 JS 내의 전체적인 코드양이 늘어난다.
👎 스타일링을 수정할 때마다 해당하는 컴포넌트 파일 위치 찾아야 한다.

styled-compoents 적용하기

import React from 'react';
// styled-compoents의 styled 를 불러와야 한다.
import styled from 'styled-components';

function App() {
  return (
    <div className="App">
      {/* MyStyled에 props로 backgroundColor를 넘긴다. */}
      <MyStyled bgColor={"red"}>hello React
      </MyStyled>
    </div>
  );
}

// scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있다.
const MyStyled = styled.div`
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
  &:hover{
    background-color: #ddd;
  }
  background-color: ${(props) => (props.bgColor? "red" : "purple")};
`;

export default App;

keyframes

웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다.

transition은 단순한 엘리먼트 상태변화에 쓰기 좋고,
animation은 다이나믹한 효과를 주는데 쓰기 좋다.

keyframes은 animation에서 사용하는 속성 중 하나이다.

keyframes in css

.box {
 width: 100px;
 height: 100px;
 background: #444;
}
.box.active {
 animation: boxFade 2s 1s infinite linear alternate;
}
@keyframes boxFade {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

keyframes in styled-components

import React from 'react';
import './App.css';
import styled, {keyframes} from "styled-components";

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}


const Box = styled.div`
 width: 100px;
 height: 100px;
 border-radius: 50px;
 background: green;
 position: absolute;
 top: 20px;
 left: 20px;
 animation: ${boxFade} 2s 1s infinite linear alternate;
`;


const boxFade = keyframes`
 0% {
  opacity: 1;
  top: 20px;
 }
 50% {
  opacity: 0;
  top: 400px;
 }
 100% {
  opacity: 1;
  top: 20px;
 }
`;

export default App;