๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/node, Angular, React

React Js - Global CSS ์„ค์ • + styled reset. classNames/bind :global local css ๋™์‹œ ์ ์šฉ

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2021. 1. 14.

๋ชฉ์ฐจ

    react module.css :global local css ๋™์‹œ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•.

    classNames/bind๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์„ ๋•Œ

    className={cx("label","labelTst")}

    .labelTst๋Š” app.module.css์— ๋“ฑ๋ก.


    React Js - Global CSS ์„ค์ • + styled reset

    1. css ์ดˆ๊ธฐํ™”๋ฅผ ์œ„ํ•ด styled-reset ์„ค์น˜
    2. styled-components๋Š” local๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— global ํ•œ css๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด GlobalStyles.js ์ƒ์„ฑ
    • ์„ค์น˜
      • NPM์„ค์น˜ : npm install styled-reset styled-components
      • ์–€ ์‚ด์น˜: yarn add styled-reset styled-components
    • ์‚ฌ์šฉ

    Components/GlobalStyles.js

     import { createGlobalStyle } from "styled-components";
     import reset from "styled-reset";
     โ€‹
     const globalStyles = createGlobalStyle`
         ${reset};
         a{
             text-decoration:none;
             color:inherit;
         }
         *{
             box-sizing:boerder-box;
         }
         body{
             font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             font-size: 14px;
             background-color:rgba(20,20,20,1);
         }
     `;
     โ€‹
     โ€‹
     export default globalStyles;
    

    Components/App.js

    import React, { Component } from "react";
     import Router from "Components/Router";
     import GlobalStyles from "Components/GlobalStyles";
     โ€‹
     class App extends Component {
       render() {
         return (
           <>
             <Router />
             <GlobalStyles />
           </>
        );
      }
     }
     โ€‹
     export default App;

    ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด button์ด๋‚˜ input๋งˆ๋‹ค ์ž‘์„ฑํ•  ์ฝ”๋“œ๊ฐ€ ์ค„์–ด๋“ฆ.

    ๋ Œ๋”๋ง ๋˜๋Š” ๋ชจ๋“  ํฐํŠธ์— ๊ด‘์—ญ ์„ค์ •ํ•œ ํฐํŠธ๊ฐ€ ์ ์šฉ๋˜๋ฏ€๋กœ ์ค‘๋ณต ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š์•„๋„ ๋จ.


    ์ง€์—ญ ๊ฐ€์ด๋“œ์—๊ฐ€์ž…ํ•˜๊ณ  ๋‚œ ๋’ค ๊ตฌ๊ธ€์—์„œ ์ž์‚ฌ ์„œ๋น„์Šค๋กœ ๋‹ค์–‘ํ•œ ์ด์šฉ์ž ํ˜œํƒ์„ ์ฃผ๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๋ฒ ํƒ€ ํ…Œ์ŠคํŠธ๋„ ์ฐธ์—ฌํ•ด ๋ณด๊ธฐ๋กœ ํ–ˆ์–ด์š”.

    ๋”ฑํžˆ ๋ฒ ํƒ€ํ…Œ์Šคํ„ฐ๋ฅผ ํ•œ๋‹ค๊ณ  ํ•ด์„œ ๋ญ”๊ฐ€ ๊ธˆ์ „์ ์ธ ๋Œ€๋‹จํ•œ ํ˜œํƒ์ด ์ฃผ์–ด์ง€์ง„ ์•Š์•„์š”.

    ๋‹ค๋งŒ ์ € ๊ฐ™์€ ๋ธ”๋กœ๊ฑฐ๋“ค์—๊ฒ ๋‚จ๋“ค๋ณด๋‹ค ํ•œ ๋ฐœ ์•ž์„œ์„œ ์ƒˆ ํ”„๋กœ๊ทธ๋žจ์˜ ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•ด ๋ณด๊ณ  ๊ธ€ ์“ธ ๊ธฐํšŒ๊ฐ€ ์ฃผ์–ด์ง„๋‹ค๋Š” ๊ฑฐ์ฃ .

    ์ตœ์‹  ๊ตฌ๊ธ€๋งต ์•ฑ์ธ ๊ตฌ๊ธ€ ์ง€๋„์—์„œ ์ฃผ๋ชฉํ• ๋งŒํ•œ ๊ธฐ๋Šฅ์€ ์ง€์—ญ ๊ฐ€์ด๋“œ์˜ ์ฐธ์—ฌ๊ฐ€ ํŽธ๋ฆฌํ•ด ์กŒ๋‹ค๋Š” ์ ๊ณผ ์ง€์—ญ๊ฐ€์ด๋“œ์˜ ํ™œ๋™์ด ํ™œ๋ฐœ ํ•ด ์ง์— ๋”ฐ๋ผ์„œ ์ง€์—ญ ๊ด€๋ จ ํŠนํžˆ ์‹๋‹น์„ ๋น„๋กฏํ•œ ์„œ๋น„์Šค ์—…์ข…์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ ์ˆ˜์ง‘์ด ์ƒ๋‹นํžˆ ๋Š˜์–ด์„œ ๊ทธ๊ฒƒ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ๋ณด๋‹ค ์ •ํ™•ํ•˜๊ณ  ํฅ๋ฏธ๋กœ์šด ์ •๋ณด ์ œ๊ณต์ด ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค๋Š” ์ ์ด์ฃ .

    ๋ฌผ๋ก  ํ•œ๊ตญ์—์„œ๋Š” ์•„์ง ์ง€๋„ ๋ฐ์ดํ„ฐ ๋ฐ˜์ถœ์ด ๋˜์ง€ ์•Š์•„์„œ ๋‹ค์Œ์ด๋‚˜ ๋„ค์ด๋ฒ„์ฒ˜๋Ÿผ ๊ตญ๋‚ด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ์„œ๋น„์Šค๋“ค์— ๋น„ํ•ด ์ •ํ™•๋„๋‚˜ ๊ธฐ๋ณธ์ •๋ณด๊ฐ€ ์—ฌ์ „ํžˆ ๋ถ€์กฑํ•˜๊ธด ํ•ฉ๋‹ˆ๋‹ค.

    ํ•˜์ง€๋งŒ ์ €์ฒ˜๋Ÿผ ๊ตฌ๊ธ€ ๊ฐ€์ด๋“œ ํ˜œํƒ์— ํ˜นํ•œ ์‚ฌ์šฉ์ž๋“ค์ด ์—ด์‹ฌํžˆ ์ง€์—ญ์ •๋ณด๋ฅผ ์˜ฌ๋ฆฐ๋‹ค๋ฉด....

    ๋‹ค์Œ์ด๋‚˜ ๋„ค์ด๋ฒ„๋Š” ๋”ฐ๋ผ๊ฐ€๊ธฐ ํž˜๋“  ๋ฐ์ดํ„ฐ์˜ ์ถ•์ ์ด ์ผ์–ด๋‚˜๊ณ  ์ง€๋„ ๋ฐ์ดํ„ฐ ๋ฐ˜์ถœ์€ ์˜๋ฏธ ์—†์–ด์งˆ์ง€๋„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค.

    5์ฒœ๋งŒ ๋ช…์˜ ์ ˆ๋ฐ˜๋งŒ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ธฐ๋ฐ˜ ์Šค๋งˆํŠธํฐ์„ ๋“ค๊ณ  ์ „๊ตญ ๋ฐฉ๋ฐฉ๊ณก๊ณก์„ ๋ˆ„๋น„๊ธฐ๋งŒ ํ•ด๋„ ๊ตฌ๊ธ€์€ ์•‰์•„์„œ ๋Œ€ํ•œ๋ฏผ๊ตญ ๊ตฌ์„๊ตฌ์„์˜ ์ •๋ณด๋ฅผ gps๋กœ ์ •ํ™•ํ•˜๊ฒŒ ์‹ค์ธกํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์†Œ์œ ํ•˜๊ฒŒ ๋  ํ…Œ๋‹ˆ๊นŒ์š”.

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€