Styled Components

임채현·2022년 2월 14일
0

What is styled components

CSS in JS

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 기법이다.
기존 웹사이트 개발시 HTML, CSS, JS는 각자 별도의 파일에 두는 것이 best practice로 여겨졌다.
하지만 최근에 React, Vue, Angular와 같은 JS 라이브러리들이 인기를 끌면서 컴포넌트 기발 방법이 주류가 되고 있다.
따라서 이제는 HTML, CSS, JS 3개로 분리하는 것이 아닌 여러개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 모두 넣는 패턴이 많이 사용되고 있다.
React는 이미 JSX문법을 통해 HTML을 포함하고 있는 형태를 취하고 있다. CSS in JS 라이브러리중 가장 널리 사용되고 있는 styled components와 함께 CSS를 JS에 삽입할 수 있다.

How to Use

npm install styled-components를 통해서 설치할 수 있다.
위의 설치된 styled-components패키지에서 styled 함수를 import한다.

  • 기존 스타일링 방식
  const divStyle = {
    backgroundColor: "black",
    width: "100px",
    height: "100px",
  };

  return <div style={divStyle}></div>
  • styled-components를 사용한 방식
  const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

  return <StyledDiv></StyledDiv>

기존에는 style 속성에 객체를 전달하거나 className을 설정하고 별도의 css파일을 import하는 방식을 사용
styled-components는 style이 적용된 Component를 직접 생성하는 방식 사용

Component 단위 스타일링

<div class="sc-bdnylx iaxDju"></div>
.iaxDju {
    background-color: black;
    width: 100px;
    height: 100px;
    display: none;
}
  • styled-components로 생성된 Components들은 임의의 클래스 명에 스타일이 적용되어 있다.
  • 따라서 중복되지 않은 class명을 생성해 스타일을 적용하기 때문에 className이 중복되거나 selector의 우선 적용 순위 때문에 css 스타일링이 혼선을 일으키는 사고를 방지할 수 있다.

가변 스타일링

  const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
    ${({ login }) => {
      return login ? `display: none` : null;
    }}
  `;

  return <StyledDiv login={true}></StyledDiv>;
  • Styled Components는 React 컴포넌트에 넘어온 props에 따라 스타일을 적용하는 기능을 제공한다. Tagged Template Literals를 사용하여 함수도 문자열 안에 포함시킬 수 있다.

  • 위의 코드는 login값이 true이면 display:none이고 false이면 아무런 값도 가지지 않는다. 이렇게 js문법을 활용하여 조건부 스타일링도 구현할 수 있다.

    확장 스타일링

    const Container = styled.div`
       max-width: 600px;
       width: 100%;
       height: 100px;
     `;
    
     const BlackContainer = styled(Container)`
       background-color: black;
     `;
    
     const RedContainer = styled(Container)`
       background-color: red;
     `;
    
     return (
       <>
         <BlackContainer />
         <RedContainer />
       </>
     );
  • styled-components는 새로운 Component를 선언하는 것 뿐만 아니라, 기존의 Component에 스타일을 추가하는것도 가능하다.

  • 확장 스타일링을 사용하면 중복된 코드 양을 줄이고, 분산된 스타일을 일관적으로 관리 할 수 있어 유지보수 비용을 줄일 수 있다.

const MyLink = styled(Link)`
    color: black;
    text-decoration: none;
  `;

  return (
    <Router>
      <MyLink to="/main"> 커스텀 링크 </MyLink>
    </Router>
  );

Component에 스타일을 추가하는 기능으로 third party Component와도 호환이 가능하다.
예를 들어 React-router-dom의 Link Component와도 위와 같은 방법으로 스타일을 적용가능하다.

가변 스타일링 2

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

const StyledButton = styled.button`
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;

${(props) =>
  props.primary &&
  css`
    color: white;
    background: navy;
    border-color: navy;
  `}
`;

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

prop에 따라 바꾸고 싶은 css 속성이 하나가 아니라 여러개일 경우도 있다. 이럴 경우에는 Styled Component에서 제공하는 css함수를 사용해주면 된다.
Primary prop이 넘어오는 경우, 글자색은 흰색, 배경색과 경계색을 남색으로 변경하고 싶을 경우를 나타낸 코드이다.
JS의 &&연산자를 통해 primaryprop이 존재하는 경우에만 css로 정의한 스타일 적용

<Button primary>Primary Button</Button>;
profile
열심히 살고 싶은 임채현입니다.

0개의 댓글