React CSS
by Alex
react 스타일 적용 방법
css module, Sass / less, styled-component
- css module: 모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여, 스코프를 지역적으로 제한하는 방식
- Sass: 자주 사용하는 CSS 전처리기 중 하나이며, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하도록 도와준다. css module방식으로 사용가능하다.
- styled-component: 요즘 인기있는 컴포넌트 스타일링 방식으로, js코드 내부에서 스타일을 적용한다.
1. CSS 모듈 활성화
- webpack을 통해 컴포넌트에 CSS적용 시킬수 있다.
- create-react-app에서는 style-loader, css-loader, postcss-loader 세가지 로더를 사용한다.
- style-loader: 스타일을 불러와 웹페이지에서 활성화 하는 역할을 한다.
- css-loader: css파일에서 import와 url(…) 문을 webpack의 require기능으로 처리하는 역할을 한다.
- postcss-loader: 모든 웹 브라우저에서 입력한 css구문이 제대로 작동하도록 -webkit, -mos, -ms등 접두사를 붙여준다.
2. Sass
- Syntactically awesome style sheets의 약어 ‘문법적으로 매우 멋진 스타일 시트’를 의미한다.
- CSS에서 사용할수 있는 문법을 확장하여 중복되는 코드를 줄여 더욱 보기 좋게 작성할수 있다.
- 두가지 패키지 사용: node-sass, sass-loader 설치
- sass-loader: webpack에서 Sass파일을 읽어온다.
- node-sass는 Sass로 작성된 코드를 CSS로 변환한다.
- 변수 사용가능
- 자주 사용하는 구문은 mixin을 이용해서 다시 사용가능 하다
@mixin place-at-center() {
top: 50%;
left: 50%;
}
@include place-at-center();
- 전역으로 사용하는 스타일을 분리해서 사용하는 것이 좋다 (css module과 같이 사용)
- open-color(색설정), include-media(반응형) 라이브러리 추가
3. styled-components
- 자바스크립트 안에 css파일을 선언한다.
import styled from 'styled-components';
const Wrapper = styled.div`
border: 1px solid black;
display: inline-block;
padding: 1rem;
...
<Wrapper....
- 자바스크립트 내부에서 스타일을 정의하기 때문에 자바스크립트와 스타일 사이 벽이 허물어져 동적 스타일링이 더욱 편해진다.
- 기존의 css파일을 사용한 방법과 다르게 관리 해야하기 때문에 협업시 조금 어려울수 있다.
4. 참조
- Sass: https://github.com/sass/dart-sass
- open-color: https://github.com/yeun/open-color
- node-sass: https://github.com/sass/node-sass
- styled-components: https://github.com/styled-components/styled-components
Subscribe via RSS