[JavaScript] React - Styled Components 기초

React

Styled Components

Styled Componets는 리액트 라이브러리 중 가장 인기있는 라이브러리 중 하나입니다. 앞으로는 스타일드 컴포넌트를 사용하기 위해서 기초를 다져보도록 합시다.

1. Styled Components 설치

npm install --save styled-components

2. Styled Components 사용

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

const Circle = styled.div`
  width: 100px;
  height: 100px;
  background: ${props => props.color};
  border-radius: 50%;
`
function App() {
  return (
    <Circle color="blue" />
  );
}

export default App;

3. 변경되는 값에 따른 Styled Components

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

const Circle = styled.div`
  width: 100px;
  height: 100px;
  background: ${props => props.color};
  border-radius: 50%;
    ${props => props.big && 
  // props.big이 True면 가로,세로를 150px로 변경
    css`
      width: 150px;
      height: 150px;
  `}
`
function App() {
  return (
    <Circle color="blue" big />
  );
}

export default App;