[React.js] 11. CSS, SCSS

react.js에서도 css와 scss를 사용해 웹페이지를 꾸밀수 있습니다.

CSS

css는 우리가 기존에 사용하던 방식으로 .css 파일을 만들어주면 됩니다. 그 후 해당 컴포넌트에 import 해줍니다.

import React from 'react';
import './CssEx.css';

const CssEx = () => {

    return (
        <div>
            <table>
                <tr>
                    <th>제목</th>
                    <th>내용</th>
                </tr>
                <tr>
                    <td>재밌는 react</td>
                    <td>css, scss를 사용하는 방법은 ...</td>
                </tr>
            </table>
        </div>
    );
};

export default CssEx;

table, tr, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}
table {
    margin: 10px;
}

 

HTML에서 link 태그로 css를 연결해주는 방법과 비슷해 큰 어려움이 없을 겁니다.

SCSS

sass(scss)는 css 전처리기를 사용해 더 편리하게 css를 작성할 수 있게 도와줍니다.

일단 작성에 앞서 node-sass를 설치해줍니다.

그 다음 다시 react 서버를 실행하면 적용됩니다.

이제 앞에서 작성한 css를 scss로 작성해보겠습니다.

table{
    margin: 10px;
    &, tr, th, td{
        border: 1px solid red;
        border-collapse: collapse;
    }
}

 

import React from 'react';
import './CssEx.scss';

작성 후 새로 만든 scss 파일을 import 해주면 제대로 적용됩니다.