React에서의 CSS in JS

yarn add styled-components

import styled from 'styled-components'

(예시)
import React from 'react';
import styled from 'styled-components';

function App(){
  return (
    <React.Fragment>
      <Container>
        <Title>안녕하세요</Title>
      </Container>
    </React.Fragment>
  )
}

const Container = styled.div`
  padding : 20px;
`;
const Title = styled.h1`
  font-size : 25px;
`;

코드 자리에 변수명을 집어넣으면 된다.

• 추가 문법 : props로 스타일링하기

여러가지 사용법 중 가장 유용한건 바로 props로 스타일링하는 방법이다.

예를 들어 위에서 만든 Title 요소가 여러가지 색깔 버전으로 필요할 경우, 제목요소를 여러번 복붙하는 것이 아닌 props 문법을 이용하면 된다.

(예시)
import React from 'react';
import styled from 'styled-components';

function App(){
  return (
    <React.Fragment>
      <Container>
        <Title 색상="blue">안녕하세요</Title>
        //파란색으로 출력
	<Title 색상={'red'}>안녕하세요</Title>
        // 빨간색으로 출력
      </Container>
    </React.Fragment>
  )
}

const Container = styled.div`
  padding : 20px;
`;
const Title = styled.h1`
  font-size : 25px;
  color : ${ props => props.색상 };
`;

Title에 color : ${ props => props.색상 } 이라는 코드를 적었다.

${} 이라는 문법은 문자를 생성하는 `` 백틱 기호안에서 쓸 수 있는 ES6 문법인데, 문자 중간중간 함수나 변수를 집어넣고 싶을 때 사용한다.

그리고 props.색상이라는 props 변수를 여기에 집어넣은 것이다. 그냥 ${ props.색상 } 이렇게 넣으면 안되고 저렇게 콜백함수로 넣어야한다.

이렇게 props로 변수를 만들어두면 이곳에 원하는 문자를 전송해 줄 수 있다.

위의 예제에선 props.색상이라는 props에 각각 blue라는 문자, red라는 문자가 들어가서 컴포넌트가 생성된다.

같은 컴포넌트인데 props 문법을 이용해 각각 다른 스타일을 줄 수 있다.

참고 : 리액트에서 props 전송을 하는 두 가지 방법
1. 그냥 일반 텍스트를 전달하고 싶으면 "" 따옴표 안에 쓰면 되고
2. 변수나 자료형을 담고 싶으면 {} 중괄호 안에 쓰면 된다.

- 그냥 css파일을 만들어도 될텐데 styled-component를 쓰는 이유가 있다면?

1. 스타일넣을 때 다른 파일이랑 컴포넌트 명이 겹쳐도 전혀 CSS적으로 문제가 생기지 않는다.

2. 컴포넌트 스타일 수정을 원할 때 CSS가 아니라 컴포넌트 파일을 찾으면 되니 수정이 편리하다.

---

SASS

CSS가 너무 길어진다면 CSS를 약간 프로그래밍 언어스럽게 작성할 수 있는 SASS라는 pre-processor 를 이용해도 된다.

SASS에선 변수, 함수, 반복문, 연산자 이런게 사용가능해서 SASS 문법으로 쉽고 짧게 CSS를 작성할 수 있다.

- SASS 사용법

1. 터미널을 열어 SASS를 설치한다.

yarn add node-sass

2. 파일명을 .scss로 저장한다.

보통 App.js에 종속되는 CSS파일을 만들때에는 src 폴더 내에 App.css 를 만들고 App.js에 App.css 파일을 import 해서 사용한다.

sass문법을 사용할 경우에는 여기서 파일명만 .scss로 바꾸어 사용하면 된다.

- SASS문법

1. 변수 사용

scss파일에선 변수를 사용할 수 있다.

$메인칼라 : #ff0000;

.title {
  color : $메인칼라;
}

$변수명 : 집어넣을 값;

이렇게 변수를 만들고 원하는 곳에서 사용이 가능하다.

2. @import

CSS 파일 간 import를 할 수 있다.

@import './reset.css';

평소에 CSS 파일을 짜다보면 자주 사용하는 스타일들이 있는데 (예를 들어 reset.css) 이런걸 다른 css (혹은 scss)파일에 저장해두고 필요해질 때마다 @import 해올 수 있다.

3. nesting 문법

CSS 짜다보면 셀렉터를 길고 복잡하게 쓰는 경우가 있는데, scss파일 안에선 셀렉터 말고 이런 식으로도 개발이 가능하다.

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

// 이렇게 말고

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

// 이렇게 사용 할 수 있다.

nesting 문법은 그냥 셀렉터를 옆으로 길게 나열하는게 아니라 안쪽에다가 작성하는 것이다.

nesting 문법을 사용하면 셀렉터 해석이 쉽고, 관련된 class끼리 뭉텅이로 관리하기 편하다.

4. extends 문법

.memo-box {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}

.memo-box-red {
	@extend .memo-box;
  background : red;
}

예를 들어 같은 디자인에 배경색만 다른 박스를 만드는 등 css코드를 재사용 할 일이 있을 때, @extend 문법을 이용하여 간단하게 만들 수 있다.

5. @mixin / @include 문법

@mixin은 그냥 함수를 만드는 문법이다. (함수는 코드 축약하고 재사용할 때 많이 쓴다.)

SASS에선 function 키워드 대신 @mixin 이라고 쓰면 되고, 중괄호 안에 내가 축약하고 싶은 코드를 담으면 된다. 그리고 함수를 부를 땐 @include 함수명() 을 쓰면 된다.

@mixin 함수() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}

.memo-box {
	@include 함수()
}

함수명이 위에 선언되어있어야 밑에서 사용가능하다.

[이 글은 코딩애플 강의를 정리한 내용입니다.]

• styled-components를 이용한 class없는 CSS스타일링
• 아니면 CSS대신 SASS를 쓰자 (SASS 문법 10분 총정리)