[리액트] styled-components로 css관리하기

styled-components

https://styled-components.com/

styled-components

• styled-components는 리액트에서 스타일을 관리하기 쉽게 해준다.
• 리액트에서는 개별적으로 컴포넌트에 대한 css파일들을 분할해서 만들었다해도 전역적으로 사용할 수 있다.
• 예를 들어, 'form-control'이라는 클래스이름에 css속성을 주면 다른 컴포넌트에서도 이 클래스이름을 사용하여 스타일이 지정되는데, 이는 여럿이서 작업할 때 클래스의 이름이 같으면 큰 혼동을 준다. 
• 그래서 위의 프레임워크를 사용하여 관리하는데, 자세한 설명은 문서를 보면된다.

 

• 위는 Button이라는 컴포넌트에 다음과 같은 속성을 넣어 다른 곳에서는 여기서 정의한 스타일을 사용하지 못한다.
• import styled from "styled-components" 로 임포트 하여
• styled.태그이름``(백틱)으로 css속성을 직접 줄 수 있다.
• :focus, :hover와 같은 가상 선택자는 &로 대체하면 된다.