[React] 자바스크립트 안에 스타일을 선언하는 방법 (CSS-in-JS)

리액트에서는 CSS를 어떻게 사용해야 할까?

리액트에서 컴포넌트를 스타일링하는 방식은 크게 4가지가 있다.

 

1. 일반CSS  :  CSS파일을 import하여 사용

 

2. SaSS  : CSS 전처리기를 이용

 

3. CSS Module : 클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지

 

4. styled-components : 자바스크립트 파일안에 스타일을 선언 

 

 

이중에서 우리는 styled-components에 대해 알아보자!

 

 

 

---

 

 

styled-components

 

- 자바스크립트 파일안에 스타일을 선언하는 방식이다.

 

- CSS-in-JS 라이브러리중 개발자들이 가장 선호한다.

 

- Tagged 템플릿 리터럴 문법을 사용한다.

 

- props 값으로 전달해주는 값을 쉽게 스타일에 적용 할 수 있는 것이 큰 장점이다. 

 

 

- 라이브러리 설치 명령어

npm install --save styled-components

yarn add styled-components

 

이 라이브러리를 사용하면 자바스크립트 파일 하나에 스타일까지 작성 할 수 있어 따로 스타일 파일을 만들지 않아도 된다는 장점이 있다.

 

 

 

Tagged 템플릿 리터럴 문법

- 스타일을 작성 할 때 `(백틱) 사용하여 만든 문자열에 스타일 정보를 넣어주는 방법이다.

- 일반 템플릿은 객체나 함수를 넣으면 형태를 잃어버리게 된다.
  ( 객체는 [object object]로 변환되고, 함수는 함수 내용이 그대로 문자열화 되어 나온다. ) 

- Tagged 템플릿 리터럴을 사용하면 템플릿 사이사이세 들어가는 JS객체나 함수 원본값을 그대로 추출하는 속성을 이용해 props를 스타일쪽에서 쉽게 조회할 수 있도록 해준다. 

 

 

 

---

 

[예제1] - 글로벌 스타일 적용

 

- 글로벌 스타일은 styled-components가 제공하는 createGlobalStyle() 함수를 사용

 

- 현재 최상위 컴포넌트 상단에 추가해주면 된다.

 

 

App.js

import React from "react";
import ReactDOM from 'react-dom';
import { createGlobalStyle } from "styled-components";
import Example from "./Components/Example";

const GlobalStyle = createGlobalStyle`
span {
  color : red;
}
`;

const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <h1>Hi, I'm an app!</h1>
    <h2>Hi, I'm an app!</h2>
    <span>여러분</span>
    <Example />
  </React.Fragment>
);

export default App;

 

- createGlobalStyle함수를 사용하여 글로벌 style을 만들었다. ( span태그에 color:red)

 

- 현재 span태그는 총 3개이다. (App.js1개 , Example.jsx 2개 )

 

- 전역 스타일에 의해 3개의 span태그의 color가 red로 바뀌는것을 알 수 있다.

 

 

Example.jsx

const Example = () => {
  return (
    <>
      <span>안녕하세요.</span>
      <span>저는 델리나입니다. </span>
    </>
  );
};

export default Example;

 

[결과]

 

 

---

 

 

[예제2] - Reset css적용

 

- styeld-reset이라는 패키지를 다운받고 , 제공하는 reset을 적용한다.

 

- styled-reset 설치하기

npm i styled-reset

 

위에서 사용했던 예제에 추가를 해보았다.

 

App.js

import React from "react";
import ReactDOM from "react-dom";
import { createGlobalStyle } from "styled-components";
import Example from "./Components/Example";
import reset from "styled-reset"; //reset import하기 추가

const GlobalStyle = createGlobalStyle`
 ${reset} 
span {
  color : red;
}
`;

const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <h1>Hi, I'm an app!</h1>
    <h2>Hi, I'm an app!</h2>
    <span>여러분 </span>
    <Example />
  </React.Fragment>
);

export default App;

 

- GlobalStyle 아래 {reset} 를 추가 해주었다. 

 

- reset css를 적용하기 전 h1,h2 태그와 적용후 태그의 크기가 달라진것을 볼 수 있다.

 

 

[결과]

 

 

 

---

 

 

[예제3]  styled와 props에 따른 조건부 스타일 적용

 

- styled-components에서 제공하는 styled를 사용한다.

 

 

App.js

import React from "react";
import ReactDOM from "react-dom";
import { createGlobalStyle } from "styled-components";
import Example from "./Components/Example";
import reset from "styled-reset";
import styled from "styled-components"; //styled import

const GlobalStyle = createGlobalStyle`
 ${reset}
span {
  color : red;
}
`;

const SetColor = styled.h1`
  color: ${(props) => props.color};
`;

const App = () => (
  <React.Fragment>
    <GlobalStyle />

    <SetColor color="blue">
      <h1>Hi, I'm an app!</h1>
      <h2>Hi, I'm an app!</h2>
    </SetColor>
    <span>여러분 </span>
    <Example />
  </React.Fragment>
);

export default App;

 

- styled를 import한다.

 

- SetColor를 선언한다. 이때 tagged 템플릿 리터럴문법을 사용하고, color를 props값에 따라  스타일링된다.  

 

- 이 코드에서는 color를 blue로 주었다. 

 

 

[결과]

 

 

---

 

 

마치며 

 

이 글에서는 styled-components를 이용해 컴포넌트 스타일링을 해보았다.

 

하지만 다른 방법도 모두 사용하는 기술이며 , 어떤 방식을 사용하는지는 회사컨벤션에 따라 다름을 유의하자!