React 스타일링

css-in-js

• javascript 코드로 스타일링

• css-in-js를 사용하는 이유, css를 사용한다면?

  • Global Namespace
    모든 스타일이 Global에 선언되어 중복되지 않는 Class 이름을 적용해야 하는 문제
  • Dependencies
    css에서 에러를 감지하기 어려운 상황
  • Dead Code Elimination
    사용하지 않는 코드 관리가 어려움
  • Minification
    css 명이 string으로 관리되므로 짧게 만들기 어려움
  • Sharing Constants
    CSS와 JS 간 variable을 공유하기 어려움
  • Non-deterministic Resolution
    css import가 비동기로 이루어질 수 있음
  • Breaking Isolation
    다른 component의 style까지 영향을 끼칠 수 있음

styled-components

• css-in-js 를 사용할 수 있게 도와주는 라이브러리

styled

import styled from 'styled-components';

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

export default () => (
  <Sample />
);

• styled.태그명 (`)backtick
  backtick
• import 순서에 관계없이 덮어씌우기 가능

Props

• props 넘기기 = jsx 문법 활용
• Template Literals 활용 가능 (문자열 중간에 javascript 사용)
• console에서 console.log를 실행하고 나서는 값이 한번 찍히고 undefined 선언
  console.log return값 = undefined
• callback 함수를 Template Literals 안에 넣을수 있음
  Literals의 return값이 styled 컴포넌트 css 안에 들어감

Animation

• css keyframes와 유사하나, keyframes도 함수로 제공

• css keyframes란?
  Animation을 만들기 위해 사용

p {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein(keyframe의 이름) {
  from(최초 상태) {
    margin-right: 100%;
    width: 300%;
  }
  
  to(나중 상태) {
    margin-right: 0;
    width: 100%;
  }
}

• keyframes 사용법

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