React.js | CSS, SASS, SCSS

ReactJS에 CSS를 추가하는 방법은 크게 세가지가 있다. 먼저 css, sass, scss의 차이점 부터 알아보자.

 

HTML

<ul class='list'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</div>

 

이러한 코드가 주어졌을 때 

CSS

.list {
  width: 100px;
  float: left;
  }
li {
  color: red;
  background: url("./image.jpg");
  }
li:last-child {
  margin-right: -10px;
  }

SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

SASS ( 중괄호, 세미콜론 사라짐 )

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

 

CSS는 작업이 크고 고도화 될수록 코드가 길어지고 연산에 어려움이 생긴다.

 

SASS가 CSS의 태생적 한계를 보완하기 위해 아래와 같은 추가기능과 유용한 도구를 제공하면서 등장하였고

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

더 넓은 범용성과 CSS의 호환성 등의 이유로 SCSS가 등장하였다.

---

 

이번 포스트에서는 리액트에서의 CSS 다루는 법을 다루고자 한다.

 

1. 인라인 스타일 적용법

말 그대로 태그가 선언된 그 자리에서 바로 CSS를 적용하는 방법이다. JSON(Key,Value) 형식으로 되어있는데, 

이 방법은 수정이 필요할 때 페이지나 컴포넌트를 일일이 다 조회해야되기 때문에 그닥 추천하는 방법은 아니다. 

const ReactComponent = props => {
	return (
    	<div
        	style={{
            	color: "blue",
                frontWeigt: "bold"
                }}
        >
        abcd
        </div>
    }
};

 

 

2. SCSS 파일 스타일 적용법 (기존 HTML CSS와 비슷)

 

또한 className을 사용하기위해 다음 모듈을 사용해준다.

$ npm i classnames

 

scss 파일을 사용하면 다음과 같이 변수를 지정할 수도 있다.

colors.css

 

또한 위에 만든 파일을 import 할 수도 있다.

customDiv.scss

 

그다음 사용할 곳에서 import 해주고 태그에 적용시켜주면 끝이다. scss파일에서 정의한 이름과 className을 동일하게 작성하면 된다.

App.js

 

 

 

3. 스타일 컴포넌트 적용법

먼저 styled-components 모듈을 설치한다.

$ npm i styled-components

 

타입스크립트는 아래 타입까지 추가한다.

$ npm i @types/styled-components

 

 

그 다음 컴포넌트 상단에 변수로 선언을 하고 return할 때 사용한다.

컴포넌트에 들어오는 Props의 값에 따라 유동적으로 변화를 줄 수도 있다.

 

 

컴포넌트 상단에 변수를 선언해주고 return할 때 쓰는 방법이다.