[React] styled-components

이전까지 React 프로젝트에서 스타일을 지정할 때

#hi.js
<div className = "style">안녕</div>

#hi.css
.style {
  display: flex;
  height: 100%;
  width: 100%;
}

이런 식으로 진행했었다...

그런데 이런 식으로 하면 클래스 이름이 겹치는 태그가 있을 때 css가 둘 다 적용되는 문제가 발생한다...!

따라서 많은 사람이 같이 개발하는 프로젝트에서는 styled-components를 사용하는 것이 효율적이다.

 

1. styled-components 설치

npm install styled-components

 

2. styled-components 사용법

클래스를 안 쓰는 대신 컴포넌트를 만들어준다. 따라서 기존에 

<button className = "Button">버튼</button>

 

 

이렇게 썼던 코드를

<Button>버튼</Button>

이렇게 써주면 된다..!

import styled from 'styled-components';

const Button = styled.button`
  background-color: #ffffff;
  padding: 16px;
`;

function Button() {
  return (
    <div>
      <Button>버튼</Button>
    </div>
  );
}