[React] styled-components

1. 개념

CSS문법을 Javascript 파일 내부에서 사용할 수 있도록 해주는 라이브러리

기존 CSS문법을 사용하기위한 과정은,
- CSS 구조를 별도로 선언하고 이를 구현하는 형식으로 진행되거나(React-Native)
- CSS 파일에 별도의 CSS logic을 구현하여 import하여 사용하는 형식으로 진행되었다(React)

//CSS구조 및 파일에 대한 별도 선언
<div className="head">{
  margin : 10px;
  padding : 15px;
}</div>

//선언한 CSS구조를 App.js rendering logic에서 활용
<div className="head">{logic}</div>

styled-component는 CSS까지 Component화하여 이러한 파일관리의 번거로움을 해소하고, 가독성을 높인 문법을 제공하는 라이브러리이다.

React에서 사용하는 Component 기반의 프로그래밍에 맞추어, 하나의 component에 마치 함수구현을 하듯이 CSS문법활용과 CSS구현을 가능하게 해준다.

2. 코드예시

styled-components library에서 확장하여 CSS사용가능

React의 Component 자체가 사용자정의를 통해 자유롭게 naming하고 내부 함수를 선언할 수 있듯이,
styled-component 역시 자유롭게 Component를 naming하고 활용할 수 있다.

import styled from 'styled-components';


const Component = styled.div`
  color : white;
`

function App extends Component {
  render(){
  
  return (
    <Component title = "this is styled"/>
  )
  }
}

Styled component를 활용한 CSS구현의 특징을 살펴보면,

• import styled from 'styled-components' 으로 styled 인스턴스를 넘겨받아 사용한다.
• 별도 CSS logic 구현이 필요하지만 Component화 하여 사용할 수 있고, 이에 따라 반복적인 UI rendering logic에 대해 편리하게 구현이 가능하다.
• 별도의 App.css 파일에서의 css 구현없이도 내부적으로 Component화하여 CSS 구현이 가능하다.
• styled.div를 통해 어떤 속성의 tag를 사용하고, `(백틱) 후 logic으로 간편한 CSS구현과 반복적인 component 활용이 가능해진다(※template literal).

3. 참조링크

styled-component 개념
https://velog.io/@johnque/styled-components

styled-component 예시
https://wonit.tistory.com/298?category=810583