[리엑트(React)] styled-components

styled-components는 리엑트(React)에서 제공하는 javascript에서 css를 사용할 수 있도록 해주는 스타일링 프레임워크이다. React Component에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고 스타일링을 간편하게 구현 할 수 있다.

 

프레임워크 설치

 

terminal 에 다음과 같이 npm install styled-components를 입력해주면 된다.

 

기본 문법

 

기본적인 틀은 아래와 같다.

import styled from "styled-components";

const (변수명) = styled.button/*스타일링 하고자 하는 요소*/`
  // HTML 엘리먼트에 대한 스타일 정의
`;

 

예제)

// 사용 예1 : 스타일 있는 h1 요소를 만들어준다
const Headline = styled.h1`
 font-size: 48px; background-color: red;
`
// 사용 예2 : 토마토색 상자를 만들어준다
const TomatoBox = styled.div`
    width: 200px; height: 200px;
    background-color: tomato;
    display: flex; justify-content: center;
    align-items: center;
`

 

예제2)

import React from 'react'
import styled from 'styled-components'
// styled-components : 스타일 있는 가상 DOM을 만들어준다!

// 여러개를 내보내는 모듈에서 가져오기
import {TealBox, RedBox} from '../styledComponents/mystyle'
// 사용 예1 : 스타일 있는 h1 요소를 만들어준다
const Headline = styled.h1`
 font-size: 48px; background-color: red;
`
// 사용 예2 : 토마토색 상자를 만들어준다
const TomatoBox = styled.div`
    width: 200px; height: 200px;
    background-color: tomato;
    display: flex; justify-content: center;
    align-items: center;
`
class Box extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
        <Headline>치킨 치킨</Headline>
        <TomatoBox>토마토상자</TomatoBox>
        <TealBox></TealBox>
        <RedBox></RedBox>
    </div>
  }
}
export default Box;

import styled from 'styled-components'

// export : 이 모듈에서 내보내는 여러개 중에 하나다!
export const TealBox = styled.div`
    width: 100px; height: 100px;
    background-color: teal;
`
export const RedBox = styled.div`
    width: 100px; height: 100px;
    background-color: red;
`
/*
export default == module.exports 
export == module.exports = {}
*/

import Box from './components/Ccompo'

class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
      <Box />  
      </div>
  }
}
export default App;

예제3) 프로퍼티를 이용한 속성에 색상 전달, 의사클래스추가

 

import styled from 'styled-components'

export const Container = styled.div`
    width: 500px; height: 500px;
    border: 2px solid black;
    padding : 20px; box-sizing: border=box;
`
// mycolor 라는 속성에 색상이 전달될 경우, 이를 적용한다
// 클래스가 아니므로 this는 생략!
// 컴포넌트이므로 속성은 받을 수 있음(props)! 
export const ColorBox = styled.div`
    width: 100px; height: 100px;
    background-color: ${props => props.mycolor};
`
// 의사 클래스를 추가하는 방법
// 의사 클래스 추가할 때는 => &:의사클래스
export const Title = styled.h1`
    font-size: 40px;
    color: red;
    &:hover{
        font-size: 60px;
        color: blue;
    }
    &:active{
        color:black;
    }

`

import React from 'react'
import {Container, ColorBox,Title} from '../styledComponents/styled-dcompo'
class Bucket extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <Container>
        <Title>나를 불러봐</Title>
        <ColorBox mycolor="green" /></Container>
  }
}
export default Bucket;

import Bucket from './components/Dcompo'
class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
      <Bucket />  
      </div>
  }
}
export default App;

예제4)

import React from 'react'
import Sample from './components/Acompo'

class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div><Sample /></div>
  }
}
export default App;

import React from 'react'
import {MyBox, MyText} from './styled-Acompo'

class Sample extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
        <MyBox myColor="tomato" myWidth="small">
        <MyText>텍스트</MyText>
        </MyBox>
        
        <MyBox myColor="teal" myWidth="big">
            <MyText>텍스트</MyText>
        </MyBox>
    </div>
  }
}
export default Sample;

import styled from 'styled-components'

// 가상 DOM (컴포넌트)은 대문자로 시작하는 이름을 붙인다!
export const MyBox = styled.div`
    width: ${props => props.myWidth === "small" ? 100 : 300}px;
    height: 200px;
    background-color: ${props => props.myColor};
    border: 1px dotted teal;
`
// 의사(pseudo) 클래스가 포함된 스타일
export const MyText = styled.h1`
    font-size: 40px;
    color: white;
    margin:0;
    &:hover{color:gray;}
    &:active{font-size: 48px;}
    display:flex;
    justify-content: center;
    align-items : center;
`