[React] styled-components

📍 styled-components
컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식(CSS-in-JS)이다. 이와 관련된 라이브러리 종류는 정말 많다.

CSS-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 styled-components에 대해 알아보자!

먼저 설치부터 해 준다.

$ yarn add styled-components

❓🤔 styled-components 사용 시 장점은?
👉 자바스크립트 파일 하나에 스타일까지 작성할 수 있어 .css 또는 .scss 확장자를 가진 스타일 파일을 따로 만들지 않아도 된다!

• src 디렉터리에 StyledComponent.jsx 파일 생성 후, 다음 예제 코드 작성
  • StyledComponent.jsx

    import styled, { css } from 'styled-components';
    
    const Box = styled.div`
    /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
    background: ${props => props.color || 'blue'};
    padding: 1rem;
    display: flex;
    `;
    
    const Button = styled.button`
    background: white;
    color: black;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
    
    /* & 문자를 사용하여 Sass처럼 자기 자신 선택 가능 */
    &:hover {
      background: rgba(255, 255, 255, 0.9);
    }
    
     /* 다음 코드는 inverted 값이 true일 때 특정 스타일을 부여해 줍니다. */
    ${props =>
      props.inverted &&
      css`
        background: none;
        border: 2px solid white;
        color: white;
        &:hover {
          background: white;
          color: black;
        }
      `};
    & + button {
      margin-left: 1rem;
    }
    `;
    
    const StyledComponent = () => (
    <Box color="black">
      <Button>안녕하세요</Button>
      <Button inverted={true}>테두리만</Button>
    </Box>
    );
    
    export default StyledComponent;

  • App.jsx

    import React, { Component } from 'react';
    import StyledComponent from './StyledComponent';
    
    class App extends Component {
    render() {
      return (
        <div>
          <StyledComponent />
        </div>
      );
    }
    } 
    export default App;

    

❓🤔 styled-components와 일반 classNames를 사용하는 CSS/Sass와 비교 시 장점은?
👉 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다는 것!