Today I Learned

매일 배운 것을 정리하며 기록합니다. stye-components에 대해 공부하였습니다.

CSS-in-JS

• 컴포넌트 스타일링의 패러다임 중 하나
• 자바스크립트 파일 안에 스타일을 선언하기에 .css, .scss 파일을 따로 만들지 않아도 되는 장점이 있음
• CSS-in-JS 대표적인 라이브러리에는 styled-components, emotion등이 있음

styled-components

• props 값으로 전달해 주는 값을 쉽게 스타일에 적용 가능
• props를 통해 간단하게 조건부 스타일링 설정 가능
• ex)

installation

npm install --save styled-components

code

import React from 'react'
import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.primary && css` 
    background: palevioletred;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

const Button = styled.button``

result

Tagged 템플릿 리터럴

• 위의 코드에서 `(backtick)을 사용하여 문자열로 스타일을 작성한 문법
• 템플릿 안에 자바스크립트 객체, 함수 전달 시 추출 가능

Reference :

• 김민준(VELOPERT), 『리액트를 다루는 기술』, 길벗 (2019), p241 - 252.
• styled-components 공식 문서(https://styled-components.com/)
• MDN Template literals (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)