Styled-component 사용법 익히기

React로 개발을 하면서 Styled-component를 알고 난 이후로 빼먹지 않고 사용해 왔던 것 같다. 그래서 전체적 기능을 한 번 정리하고 사용하는 게 좋을 것 같아서 이렇게 정리하게 되었다 !

---

사용하기 전 첫 단계로,

$ npm install styled-component

를 통해서 패키지를 설치하고

import styled from "styled-components";

styled 함수를 import해서 사용하면 된다.

---

컴포넌트를 만들 때 props로 데이터를 가져와 사용하기에, 이에 대한 예시로 버튼을 만들어 쭉 나열하고자 한다.

고정 스타일링

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
`;

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

위 스타일은 고정 스타일링으로, 내가 적어놓은 css요소들이 위 StyledButton버튼에 항상 동일하게 적용된다.
그러나 상황에 따라 변하는 스타일링이 필요한 경우도 생기게 되는데, 그 때는 StyledButton에 props를 전달하여 가변 스타일링을 해야 한다.

가변 스타일링

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  );
}

여기서 내가 StyledButton props에 color나 background 요소를 지정하지 않으면 기본 값인 gray와 white가 적용된다. 만약 내가 전달한 색 값이 있다면 그 값이 적용되는 것이고.

상황에 따라 2~3개의 요소가 아니라, 전체 스타일이 가변적으로 바뀌어야 할 때도 있는데, 그 때는 { css } 함수를 사용하여 큰 스타일을 변경할 수 있다.

{css}

import styled, { css } from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid blue;
  border-radius: 3px;

  ${props =>
    props.secondary &&
    css`
      background: white;
      color: blue;
      border: 2px solid blue;
    `}
`;


function Button({ children, color, background }) {
  return (
   <div>
    <Button primary>Primary</Button>
    <Button secondary>Secondary</Button>
  </div>,
);

Button에 primary로 props가 전달되면 만들어지는 스타일과, secondary가 전달되면 만들어지는 스타일을 나눌 수 있다. 이를 통해 좀 더 다양한 스타일링이 가능해진다!

---

createGlobalStyle

createGlobalStyle는 전역적 스타일링을 설정할 때 사용한다. 그 구조를 간단하게 설명하면

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body{
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <>
        </>
        </>
      </>
    </>
  );
}

App.js에 렌더링하는 코드들 중 최상위 태그 안에 GlobalStyle을 넣어주면 된다. 보통 전역적으로 필요한 스타일이 정해져 있기 때문에, GlobalStyle파일을 따로 만들어 작성하고 import하는 것도 좋은 방법이다 !

---

현재 자주 사용하는 수준에서 기억해야 할 것을 정리해 두었고, 앞으로는 반응형 디자인과 애니메이션에 대해 자세히 다루어보려고 한다.

참고: https://styled-components.com/docs/api#css