Styled Components

: css나 sass 같이 class, id, tag name 을 가져와 쓰지 않고, 스타일 지정된 컴포넌트를 생성하여 TAG 쓰듯 스타일 컴포넌트를 쓰는 것을 말한다.

 

즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하며 전역에서 중첩 사용되지 않게 만들어줌

 

 

< Styled Components 사용법>

1. 터미널에 다음 명령어 입력

npm install --save styled-components

2.

import styled from 'styled-components';

3.

const 스타일 컴포넌트 이름 = styled.태그명'여기에스타일지정'

- 이때 ` ` 사용 주의 !! ( " " 아님, ' ' 아님)

- import들 아래, return 함수 위에 (밖에) 쓰기

-  태그 첫글자는 대문자