REACT 8일차 (material design)

CSS 또는 scss 이용하여 머티리얼 디자인 적용하기 

 

1. CDN방식으로 머티리얼 디자인 적용하기

머티리얼 디자인: 구글에서 공개한 디자인 가이드

 

CDN은 특정 파일을 전세계에 분산,복사하여 가장 근접한 곳에서

빠르게 내려받을 수 있도록 파일을 제공하는 방법이다.

리액트 서버에 파일을 추가하지 않고 직접 이용할 경우 이 방법을 이용한다.

 

public내의 index.html 에 아래의 코드를 추가하면 된다.

<link

    rel="stylesheet"

    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"

/>

 

2.App 컴포넌트에 머티리얼 디자인 적용하기

<div>

      <nav>

        <div className="nav-wrapper">

          <div>harry595의 티스토리</div>

        </div>

      </nav>

   <h1>REACT !!! </h1>

</div>

 

위와 같이 코드를 삽입하면 아래와 같은 결과를 얻을 수 있다. 

 

3. 파일 방식으로 머티리얼 디자인 적용하기

https://materializecss.com/

Documentation - Materialize

해당 사이트의 materialize.zip을 다운 후 압축 폴더내의 materialize.css 파일을

복사한 후 src 폴더에 집어넣은 후 아래와 같이 코드를 추가하면 된다.

 

import './materialize.css';

 

5.scss로 스타일 모듈화 하여 머티리얼 디자인 적용하기

sass/components의 _varialbes.scss 파일의 1.Color의 요소를 바꾸면 색이 바뀐다.

 

------------------------------------------------------------

 

컴포넌트에 머티리얼 디자인 적용해 보기

 

1. 04폴더에 전에 했던 Input.jsx를 추가한 후 아래와 같이 코드를 수정, 추가한다.

<div className="input-field"> => 머티리얼 css의 입력항목 스타일 추가

<label htmlFor={`input_${name}`}> => 라벨의 마우스 클릭 시 마우스 커서가 입력 항목 이동

{errorMessage && <span className="error">{errorMessage}</span>} => 입력설명 항목 스타일 추가

 

2. 전처럼 stories 폴더에 위의 코드를 import 하는 Input.jsx를 생성

-> 하지만 storybook이 바뀌지 않음

-> sass-loader을 프로젝트에 추가해야함

yarn add --dev sass-loader

 

3. 스토리북에 sass-loader설정

.stroybook 폴더에 webpack.config.js 파일 생성 아래와 같이 작성

 

const path = require("path");

module.exports = {

  module: {

    rules: [

      {

        test: /\.scss$/, => scss파일만 적용하도록 규칙 추가

        loader: ["sass-loader"], => sass구문을 css로 변환

        include: path.resolve(__dirname, "../"),

      },

    ],

  },

};

 

4. config.js에 materialize.css 임포트

import "../src/sass/materialize.scss";

그 후 스토리를 재가동하면 달라진 UI를 볼 수 있음