[React] - styled component

styled-components는 CSS를 JavaScript에서 인라인 형식으로 활용할 수 있는 스타일링 프레임워크다.
대표적인 CSS-in-JS 라이브러리로, React의 Component와 비슷하게 따로 CSS 스타일을 지정하여
사용할 수 있기 때문에 스타일의 재사용성이 높아지게 된다.

패키지 설치

$ npm i styled-components

사용법

import styled from "styled-components";

const StyledDiv = styled.div`
	width: 100px;
   	height: 50px;
`

return <StyledDiv>div입니다.</StyledDiv>

styled-components 라이브러리에 있는 styled를 import하고, styled.element(``) 을 이용해 컴포넌트를 만들어준다. 백틱 (``) 안에서 css 스타일링을 할 수 있다.

특징, 활용

1. 상속

const StyledDiv = styled.div`
	width: 100px;
    	height: 50px;
`

const WhiteDiv = styled(StyledDiv)`
	background-color: white;
`

const BlackDiv = styled(StyledDiv)`
	background-color: black;

기존에 사용하던 component에 추가적인 CSS가 적용된 다른 컴포넌트를 쓰고 싶으면 다음과 같이 상속받아 사용할 수 있다.

2. props

styled component를 사용하며 가장 유용하게 사용했던 기능이다.

const Button = styled.button`
    background: ${props => props.color ? props.color : 'yellow'};
`;

{...}

<Button color={"red"}>Custom red button</Button>

다음과 같이 component에 color라는 값에 따라 button의 색을 조정하고 싶다면 다음과 가팅 props로 전달해서 조건부 스타일링을 할 수 있다.

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

const Button = styled.button`
 ${(props) =>
    props.color ?
    css`
    	background: props.color;
    ` :
    css`
		background: yellow;
    `
}
	
`;

{...}

<Button color={"red"}>Custom red button</Button>

만약 props에 따라 변경되는 CSS 코드가 많으면 다음과 같이 css props 값에 따라 CSS를 아예 따로 작성해주는 방법도 있다.

이 props만 잘 활용해도 코드가 깔끔하고 간결해지고, style을 유동적으로 사용할 수 있다. props를 이용해 스타일링을 할 수 있을지, 어떻게 보기 좋게 코드를 짤 수 있을지 항상 생각하며 개발하자..!

3. 가상 요소

const Button = styled.button`
  &:hover{  
    background-color : skyblue;
    color : blue
  }
{...}

기존에 CSS에서 사용하던 hover,after,before와 같은 가상요소를 사용하기 위해선 &라는 키워드를 이용한다.

const Wrapper = styled.div`
  width: 100px;
  height: 100px;
  background: yellow;
`;

const Img = styled.img`
  width: 100px;
  height: 100px;
  display: none;

  ${Wrapper}:hover & {
    display: block;
  }
`;

Wrapper 컴포넌트가 hover 되었을 때, Img 컴포넌트에 CSS를 건드리고 싶다면 다음과 같이 & 뒤에 해당 컴포넌트를 넣어준다.

4. 애니메이션

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

const SidebarShowUp = keyframes`
   0% {
      transform: translate(-30%, 0);
    }
    100% {
      transform: translate(0, 0);
    }
`;

const SidebarShowDown = keyframes`
   0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
`;

const SidebarWrapper = styled.div`
  ${(props) =>
    props.sidebarToggled !== null &&
    css`
      animation: 0.7s ${props.sidebarToggled ? SidebarShowUp : SidebarShowDown} forwards;
    `}
`;

<SidebarWrapper sidebarToggled={true} />

styled-component에서 애니메이션을 사용할 땐 keyframes라는 것을 사용한다. 다음은 sidebarToggled 값에 따라 애니메이션을 어떻게 보여줄지에 대한 예시이다. 위에서 설명한 props도 활용됐다.

주의 사항

import styled from 'styled-components';

const Box = () => {
    // 나쁜 예
    const Div = styled.div`
        {...};
    `;

    return (
        <Div>Bad!</Div>
    );
}

return Box;

import styled from 'styled-components';

// 좋은 예
const Div = styled.div`
    {...};
`;

const Box = () => {
    return (
        <Div>Good!</Div>
    );
}

return Box;

styled-component는 render 안쪽이 아닌 밖에 선언해줘야한다. 만약 안에 작성하면, 리렌더링이 될 때마다 요소를 새로 제작하기에 매우 비효율적이다.