[React.Js/JavaScript] 간단 리엑트 스타일( CSS ) 적용하기

[React.Js/JavaScript] 간단 리엑트 스타일( CSS ) 적용하기

React

저번 포스팅에서는 간단하게 컴포넌트를 생성하고 추가하는 작업을 진행하였습니다.

오늘은 간단하게 리엑트에 CSS를 입히는 작업을 하도록 하겠습니다.

바로 SCSS 를 이용하여 작업을 진행하려고 합니다. * SASS를 알아오도록 합시다.

React 2.0 이 나오기 전까지 이 SCSS는 Webpack 작업을 통해서 추가하였습니다만

현재는 그냥 node-sass 을 설치하고 사용하면 됩니다.

이렇게요

yarn add node-sass

매우 쉬워졌습니다.

까먹고 실행을 해도 아래와 같은 메세지와 함께 설치를 권유합니다.

이후 scss 파일을 생성합니다.

/src/Components/Display/styles.scss 생성

이후 간단한 css를 작성합니다.

.header {

display: flex;

flex-direction: column;

font-size: 32px;

.title {

color: red;

}

}

header와 title의 css를 적용시켰습니다.

그러면 이제 presenter 에서도 변경을 해야겠죠?

사용하는 방법은 아래의 코드를 보고 알아봅시다

import React from "react";

import "./styles.scss";

const Display = props => {

const { name } = props;

return (

<div className="header">

<span className="title">Hello React {name}</span>

<span className="subTitle">No Content</span>

</div>

)

}

export default Display;

간단합니다.

생성한 scss 파일을 위와 같이 임포트 하여 사용하면 됩니다.

이후 실행을하면 아래와 같은 화면을 볼 수 있습니다.

그리고 한가지 더 적용을 하겠습니다.

검사창을 열어 엘리먼트 탭에서 위와 같은 구조를 확인 할 수 있습니다.

프로젝트가 커지다보면 이 클레스명이 겹칠수도 있습니다.

이 외에도 많은 이유가 있지만 이러한 이유로 css module을 사용합니다.

자바스크립트나 웹팩이 코드를 컴파일 할때 자동으로 클래스명을 만들어 줍니다.

이 방법도 React 2.0이 나오면서 많이 쉬워지게 되었습니다.

전에 만든 scss 파일의 이름을 위와 같은 styles.module.scss 로 바꿔줍니다.

이후 Presneter 파일을 아래와 같이 변경해줍니다.

import React from "react";

import styles from "./styles.module.scss";

const Display = props => {

const { name } = props;

return (

<div className={styles.header}>

<span className={styles.title}>Hello React {name}</span>

<span className={styles.subTitle}>No Content</span>

</div>

)

}

export default Display;

바뀐 부분은 바로 Import 와 className 부분이 위와 같이 변경되었습니다.

그럼 웹에서는 어떤식으로 변경 되었는지 확인해 봅시다.

위와 같이 컴파일할 때 자동으로 이름을 생성하여 줍니다.

이제 우리는 React에 CSS 를 적용할 수 있게 되었습니다.

이것으로 간단 리엑트 스타일( CSS ) 적용하기 포스팅을 마치도록 하겠습니다.

---

제 젤리값에 큰 힘이 됩니다.