React - styled-components

1. styled-components 란

컴포넌트 스타일링 기법중 하나로서 class 이름 짓기 해방, 컴포넌트에 스타일을 적기때문에 직관적인 장점을 가지고 있습니다.

2. styled-components 설치

yarn add styled-components

3. styled-components 적용

import React from "react";
import BucketList from "./BucketList";
import styled from "styled-components";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
    };
  }

  render() {
    console.log(this.state.list);
    return (
      <div className="App">
        <MyStyled>
          <p>im here!!!</p>
        </MyStyled>
      </div>
    );
  }
}

// scss 문법 1: 네스팅! 내가 포함하고 있는 요소에 접근할 수 있어요. ex)내 것{ 자식 것: {}}
// scss 문법 2: &는 나 자신!
const MyStyled = styled.div`
  width: 50vw;
  height: 150px;
  background-color: ${(props) => (props.bg_color ? "red" : "purple")};
  p {
    color: blue;
  }
  &:hover{
    background-color: yellow;
  }
`;

export default App;

마무리

공통적으로 사용하는 style 같은경우 styled 컴포넌트로 만들어 속성값만 바꿔서 사용하면 좋을 것 같습니다.