2. Shop(2)

CSS in JS

• class 선언없이 컴포넌트에 CSS를 직접 작성
• npm / yarn 을 이용하여 styled-components 라이브러리 설치
• import styled from 'styled-components'
• 변수를 만들고 styled.만들고싶은 태그(div),백틱기호를 이용해 기본 스타일을 넣어주면 된다
• 여러가지 비슷한 UI가 필요한 경우에는 props를 이용

// 예시

let 제목 = styled.div`
  font-size: 25px;
  color: ${ props => props.색상 };
`;

// 사용

<제목 색상="red"> 안녕하세요 </제목>  // 색상이 red고 폰트사이즈가 25px인 div

---

SASS

• CSS를 프로그래밍언어스럽게 작성가능한 Preprocessor
• npm / yarn 을 이용해 node-sass 라이브러리 설치
• 파일명을 이름.scss 로 만들어 준뒤 스타일링할 파일에서 import './이름.scss'

$변수 문법

• $변수명 : 변수에 넣을값

@import 문법

• @import '경로'

nesting 문법

• 셀렉터를 길게 복잡하게 쓰지 않아도 간단하게 작성가능
• 안쪽에 쓰면 띄어쓰기 셀렉터랑 같은 의미이다

/* 예시 */

div.container {
  h4{
    color: blue;
  }
  p {
    colot: green;
  }
}

@expend

• @expend 적용된 스타일을 복사해올 class
• @expend .alert;이라 적을경우 alert라는 class에 들어있던 스타일이 복사된다

@mixin / @include

• @mixin 함수이름() {} : 함수를 만들때 사용(function 대신 사용한다고 생각하면 된다)
• @include 함수이름() : 만든 함수를 사용할 때 사용

---

CSSTransition

• npm / yarn 이용해서 yarn add react-transiton-group 설치
• 애니메이션 주고싶은 컴포넌트 상단에 import 해오기 import {CSSTransition} from 'react-transition-group'
• 애니메이션 적용할 HTML들을 <CSSTransition> 태그로 감싸고 그 안에 in, classNames, timeout 속성을 넣는다
  • <CSSTransition in={} classNames="wow" timeout={500}>
  • in : 스위치(true일때만 작동)
  • classNames : 어떤 애니메이션을 적용할지 작명
  • timeout : 작동시간
• 애니메이션 주고싶은 컴포넌트에 딸려있는 CSS파일로 가서 애니메이션을 디자인한다
  • .작명-enter { 컴포넌트 등장시작시 적용할 CSS }
  • .작명-enter-active { 컴포넌트 등장중일시 적용할 CSS }