Styled Component

- Styled Component : CSS in JS 라이브러리(tagged template literal 사용)

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

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

 

- props 이용 예제

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

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${props => props.color || 'black'};
  border-radius: 50%;
`;

function App() {
  return <Circle color="blue" />;
}

export default App;

cf> template literal : `(백틱)을 이용해 문자열 조합을 쉽게 해주는 ES6 문법

const message = `hello ${name}`;

tagged template literal : `(백틱)을 이용해 문자열 조합을 쉽게 해주는 구조분해 ES6 문법(넘겨준 값의 string과 value가 구분되어 함수 인자로 넘겨짐)

function favoriteColors(texts, ...values) { 
	return texts.reduce((result, text, i) => 
    `${result}${text}${values[i] ? `<b>${values[i]}</b>` : ''}`, ''); } 
favoriteColors`제가 좋아하는 색은 ${red}과 ${blue}입니다.`