React Style

React Style

CSS 문자열 대신 캐멀 케이스 프로퍼티를 가진 JavaScript 객체를 받아들입니다.

<h1 style={{ color : "purple" }}>HI</h1>

 

className

CSS 클래스를 컴포넌트에 추가할 때 사용합니다.

className prop에 문자열을 넘깁니다.

className="menu navi-var"
className += " addict"

+=를 사용하는 이유는 기존 값에 추가적으로 더하는 것이고
addict 앞에 띄어쓰기 한 이유는 class는 띄어쓰기로 구분하기 때문입니다.

 

CSS Modules

CSS 파일을 하나의 모듈처럼 사용하고 클래스 이름 충돌을 극복할 수 있습니다.

애니메이션을 할 때 주로 사용한다고 합니다.

 

CSS-in-JS : styled-components

#with npm
npm install --save styled-components

#with yarn
yarn add styled-components

import styled from 'styled-components'

const Button = styled.button`
  padding: 2rem;
  margin: 0.5rem;
  color: blue;
`;

style file과 components 위주의 작업에 필요한 컴포넌츠의 스타일만 랜더링 하기 때문에 이 방법을 주로 사용합니다.