리액트(React) - 스타일 컴포넌트(styled components)

스타일 컴포넌트(syled components) : 리액트 컴포넌트 안에 쉽게 CSS를 내장할 수 있도록 도와주는 도구이다.

 

설치 명령어

npm install sytled-components

 

import React from 'react'
import styled from "styled-components";

const StyledButton = styled.button` //스타일 컴포넌트
    color: white;
    background-color: purple;
`

const Contact = () => {
  return (
    <StyledButton>Contact</StyledButton>
  )
}

export default Contact

이때 styled.button만으로 만드어지는 것이 아니라 백틱(`)을 사용합니다. 이 백틱도 함수인데, 이 함수를 호출하면 컴포넌트가 만들어집니다. 즉, 스타일드 컴포넌트는 컴포넌트를 만드는 기술이다. 그러면 왜 스타일드 컴포넌트를 쓰는 걸까요? 컴포넌트를 만들 때 컴포넌트 안에 모든 요소를 넣다 보니까 디자인적인 요소까지 컴포넌트에 내장하는 경우가 많습니다. 예를 들어, 스타일드 컴포넌트를 사용하지 않은 코드에서 style 속성에 {style} 객체를 주입하고 있고, style 객체는 {color:'white', backgroundColor:'puple'}과 같이 생겼습니다. 하지만 CSS는 객체가 아니잖아요? CSS를 자바스크립트화하다 보니까 어쩔 수 없이 약간 어직스러운 객체를 만들게 됐습니다.

 

컴포넌트를 만들 때 백틱 안에 CSS 코드를 드개로 작성할 수 있고, 객체화한 CSS를 주입하는 것과 같은 효과를 냅니다.

즉, 스타일드 컴포넌트는 여러 가지 효용을 제공하는데, 그중에서 제일 중요한 것은 우리가 알고 있는 CSS 그대로 사용할 수 있다는 점입니다.

 

import React from 'react'
import styled from "styled-components";

const StyledButton = styled.button`
    color: white;
    background-color: purple;
`

const Largebutton = styled(StyledButton)`
    font-size: 50px;
`

const PrimaryButton = styled.button`
    color: ${props => props.primary ? 'white' : 'black'};
`

const Contact = () => {
  return (
    <div>
        <StyledButton>Simple</StyledButton>
        <Largebutton>Large</Largebutton>
        <PrimaryButton primary={true}>Primary</PrimaryButton>
    </div>
  )
}

export default Contact;

스타일드 컴포넌트의 또 한 가지 기능은 이미 존재하는 컴포넌트를 래핑해서(감싸서) 스타일이 적용된 새로운 컴포넌트를 만들 수 있다는 것입니다. 상속 받을 수 있다는 의미입니다.

 

다양한 방식으로 스타일 컴포넌트를 만들 수 있다.