React 컴포넌트 스타일 styled-component

컴포넌트에 스타일을 입히는 방법은 여러 가지가 있지만 여기선 styled-component를 사용하여 스타일을 입히는 방법에 대해 설명한다.

 

우선 styled-component를 설치해야한다.

npm install -g styled-components

 

styled 사용법

예제를 보면 다음과 같다.

 

import React, {useState, useEffect} from "react";
import styled from "styled-components";

const Div = styled.div`
    color:red;
    &:hover {
        color:cyan;
    }    
`

function Counter() {    
    const [a, set_a] = useState(0);        
    return (
        <>            
            <Div>{a}</Div>
            <button
                onClick ={() => {                
                    set_a(prev_a => prev_a + 1)                    
                }}
            >up</button>
        </>
    )
}
export default Counter;

 

styled는 css룰을 따르며 styled컴포넌트로 쓰기 위해선 몇가지 규칙이 있다.

원래의 DOM이름을 styled.{}로 사용하면 된다.

  ex) div를 사용하기 위해선 styled.div

styled 컴포넌트는 대문자로 시작해야 한다. 

  ex) Div

styled 컴포넌트는 ` `사이 문자열로 이루어져 있으며, 내부에서 &는 자기 자신을 선택하는 문자다.

  ex) &: hover { ... }

 

props 전달

styled 컴포넌트의 속성으로 넘겨진 값들은 styled 내부에서 props를 통해 사용할 수 있다.

 

import React, {useState, useEffect} from "react";
import styled from "styled-components";

const Div = styled.div`
    color:${props => props.color};
    &:hover {
        color:cyan;
    }    
`

function Counter() {    
    const [a, set_a] = useState(0);        
    return (
        <>            
            <Div color="red">{a}</Div>
            <button
                onClick ={() => {                
                    set_a(prev_a => prev_a + 1)                    
                }}
            >up</button>
        </>
    )
}
export default Counter;

위 예제는 Div 컴포넌트의 속성으로 color="red"속성을 넘겨, styled 내부에서 props를 통해 사용하는 예제다.

결과는 위의 예제와 동일하다.