React: React에서 Styled Component 사용하기

styled-components

styled-components

 React에서 CSS적용하는 방법은 다양하게 있다. 그 중에서 Styled Components는 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 리액트 컴포넌트에 스타일을 쉽게 적용할 수 있도록 도와준다. 

 

Styled Components 사용하기

1. styled components 설치

// npm
npm install styled-components

// yarn
yarn add styled-components

 

2. styled-components 불러오기

import styled from 'styled-components'

 

3. Styled Component 생성하기

styled component 생성 시에 CSS 스타일을 정의하기 위해 템플릿 리터럴, 즉 반드시 백틱(`)을 사용해 감싸야 한다.

• const 변수명 = styled.태그` CSS 스타일 지정 `

    const StyledH1 = styled.h1`
        font-size: 1.6rem;
        text-align: center;
        color: purple;
    `

 

4. Styled Component 사용하기

<변수명> 태그를 사용해서 styled component를 사용할 수 있다.

import './App.css';
import styled from 'styled-components'

function App() {
  const StyledH1 = styled.h1`
  font-size: 1.6rem;
  text-align: center;
  color: purple;
`

  return (
    <div>
      <StyledH1> 안녕하세요. </StyledH1>
    </div>
  )
}

export default App

 

동적 스타일링

Styled components를 사용할 때 props를 사용하여 같은 styled components에서 스타일을 동적으로 변경할 수 있다. 동적 스타일링을 통해서 코드의 재사용성을 높이고, 유지 보수를 용이하게 할 수 있다. 아래는 prop을 통해서 버튼의 배경색을 다르게 나타낸 예시이다.

import './App.css';
// styled-components를 불러오기
import styled from 'styled-components'

function App() {
// styled-components를 사용해서 button 컴포넌트 생성
  const StyledButton = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 2rem;
    border-radius: 5px;
// props를 받아와서, props.color가 있을 시에 해당하는 컬러로 배경색 지정
    background: ${props => props.color ? props.color : "gray"};
// props를 받아와서, props.color가 있을 시에 글자색 white로 변경
    color: ${props => props.color? "white" : "black"};
  `

  return (
    <div>
      <StyledButton>보통버튼</StyledButton>
      <StyledButton color="blue">파란버튼</StyledButton>
      <StyledButton color="green">초록버튼</StyledButton>
    </div>
  )
}

export default App

 

공통디자인 관리

Styled Components에서 { css }를 사용하면 공통적으로 사용하는 CSS 스타일을 정의하고 재사용할 수 있다. 이를 통해 코드의 중복을 줄이고 유지 보수를 쉽게 할 수 있다.

import './App.css';
import styled, { css } from 'styled-components'

// 공통적으로 사용할 border와 border-radius를 css에 정의함
function App() {
  const CustomBorder = css`
    border: 2px solid black;
    border-radius: 5px;
  `
  
// 공통 스타일을 가져와 적용함
  const StyledButton = styled.button`
    ${CustomBorder};
    font-size: 1rem;
    margin: 1rem;
    padding: 2rem;
    background: ${props => props.color ? props.color : "gray"};
    color: ${props => props.color ? "white" : "black"};
  `

  const StyledDiv = styled.div`
    ${CustomBorder}
    width: 50%;
    height: 50%;
  `

  return (
// div와 button 둘다 border와 border-radius가 적용된 모습을 볼 수 있다.
    <StyledDiv>
      <StyledButton>보통버튼</StyledButton>
      <StyledButton color="blue">파란버튼</StyledButton>
      <StyledButton color="green">초록버튼</StyledButton>
    </StyledDiv>
  )
}

export default App

 

가상 클래스 선택자 사용하기

& 기호를 통해서 Styled Components에서 CSS의 가상 클래스 및 하위 선택자를 사용할 수 있다. &#아이디, &.클래스 등으로 사용이 가능하다.

• &가상클래스

import './App.css';
import styled from 'styled-components';


// 가상클래스 hover 사용
function App() {
  const StyledButton = styled.button`
    font-size: 1rem;
    margin: 1rem;
    padding: 2rem;
    background: ${props => props.color ? props.color : "gray"};
    color: ${props => props.color ? "white" : "black"};

    &:hover {
    background: rgba(233, 233, 233, 0.8); // hover 시 배경색 변경
    color: black; // hover 시 글자색 변경
    }
    `

  return (
    <div>
      <StyledButton>보통버튼</StyledButton>
      <StyledButton color="blue">파란버튼</StyledButton>
      <StyledButton color="green">초록버튼</StyledButton>
    </div>
  )
}

export default App