36일차

🐼

36일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 5. React Component Styling

 

---

 

 

Ch 5. React Component Styling

 

 

 🔗 Style Loaders 

 

 

// webpack.config.js

// import './App.css';
{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      mode: 'icss',
    },
  }),
  sideEffects: true,
},

// import styles from './App.module.css';
{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      mode: 'local',
      getLocalIdent: getCSSModuleLocalIdent,
    },
  }),
},

// import './App.scss';
// import './App.sass';
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'icss',
      },
    },
    'sass-loader'
  ),
  sideEffects: true,
},

// import './App.module.scss';
// import './App.module.sass';
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},

 

 

 🔗 CSS

 

import './App.css';

 

http://getbem.com/naming/

BEM — Block Element Modifier

 

 

 🔗 SASS 

 

import './App.scss';

 

 

 🔗 CSS module  => 전역적으로 오염되지 않게 사용한다.

 

import './App.module.css';

 

 

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

Adding a CSS Modules Stylesheet | Create React App

 

{
  App: "App_App__PsC3r"
  App-logo-spin: "App_App-logo-spin__EtEZt"
  header: "App_header__yz0SQ"
  link: "App_link__o-ozp"
  logo: "App_logo__Yh+D4"
}

 

(+ classnames)

$ npm i classnames

console.log(classNames("foo", "bar"));
console.log(classNames("foo", "bar", "baz"));
console.log(classNames({ foo: true }, { bar: false }));
console.log(
  classNames(null, false, "bar", undefined, 0, 1, { baz: null }, "")
);
console.log(classNames(styles["button"], styles["loading"]));

 

// ./App.js

import styles from "./App.module.css";
import Button from "./components/Button";

function App() {
  return (
    <div className={styles["App"]}>
      <header className={styles["header"]}>
        <img src={logo} className={styles["logo"]} alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button>Button</Button>
      </header>
    </div>
  );
}

export default App;

// ./components/Button.jsx

import React from "react";
import styles from "./Button.module.css";
import classNames from "classnames/bind";

const cx = classNames.bind(styles);

class Button extends React.Component {
  state = {
    loading: false,
  };

  render() {
    const { loading } = this.state;
    return (
      <button
        onClick={this.startLoading}
        className={cx("button", { loading })}
        {...this.props}
      />
    );
  }

  startLoading = () => {
    this.setState({
      loading: true,
    });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 1000);
  };
}

export default Button;

// ./components/Button.module.css

.button {
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
}

.loading {
  border: 2px solid grey;
  color: grey;
}

 

 

 🔗 Styled Components 

 

$ npm i styled-components

 

// ./App.js

import StyledButton from "./components/StyledButton";
import styled from "styled-components";
import { createGlobalStyle } from "styled-components";
import StyledA from "./components/a";

const PrimaryStyledButton = styled(StyledButton)`
  background: palevioletred;
  color: white;
`;

const UppercaseButton = (props) => (
  <button {...props} children={props.children.toUpperCase()} />
);

const MyButton = (props) => (
  <button className={props.className} children={`MyButton ${props.children}`} />
);

const StyledMyButton = styled(MyButton)`
  background: transparent;
  border-radius: 3px;
  border: 2px solid ${(props) => props.color || "palevioletred"};
  color: ${(props) => props.color || "palevioletred"};
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  :hover {
    border: 2px solid red;
  }

  ::before {
    content: "@";
  }
`;

const GlobalStyle = createGlobalStyle`
  button{
    color: yellow;
  }
`;

function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>버튼</StyledButton>
          <StyledButton primary>버튼</StyledButton>
          <PrimaryStyledButton>버튼</PrimaryStyledButton>
          <StyledButton as="a" href="/">
            버튼
          </StyledButton>
          <StyledButton as={UppercaseButton}>button</StyledButton>
          <StyledMyButton>button</StyledMyButton>
          <StyledMyButton color="green">button</StyledMyButton>
          <StyledA href="https://google.com">태그</StyledA>
        </p>
      </header>
    </div>
  );
}

export default App;

// ./components/StyledButton.jsx

import styled, { css } from "styled-components";

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  ${(props) =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `}
`;

export default StyledButton;

// ./components/a.jsx

import styled from "styled-components";

const StyledA = styled.a.attrs((props) => ({
  target: "_blank",
}))`
  color: ${(props) => props.color};
`;

export default StyledA;

 

 

 🔗 React Shadow 

 

https://developer.mozilla.org/ko/docs/Web/Web_Components

웹 컴포넌트 | MDN

 

$ npm i react-shadow

 

// ./App.js

import root from "react-shadow";

const styles = `
  .App {
    text-align: center;
  }

  .App-logo {
    height: 40vmin;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .App-logo {
      animation: App-logo-spin infinite 20s linear;
    }
  }

  .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }

  .App-link {
    color: #61dafb;
  }

  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  p{
    color: yellow;
  }
`;

function App() {
  return (
    <root.div>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
      <style type="text/css">{styles}</style>
    </root.div>
  );
}

export default App;

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
    <p>hello</p> // ⭐
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

•  단점
  • 공통적으로는 쓰이는 style 을 계속 반복적으로 넣어줘야 한다.
  • 외부와 내부가 차단되어 있어, 외부에서 값을 받아서 상대적으로 표현할 때 제약이 있을 수 있다.

 

 

 🔗 Ant Design 

 

$ npm i antd

 

https://ant.design/components/calendar/

Calendar - Ant Design

 

https://ant.design/components/icon/

Icon - Ant Design

$ npm install --save @ant-design/icons

 

https://ant.design/components/grid/#Row

Grid - Ant Design

 

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css"; // ⭐
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

// ./App.js

import logo from "./logo.svg";
import "./App.css";
import { Calendar } from "antd";
import { GithubOutlined } from "@ant-design/icons";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <GithubOutlined />
        </p>
        <Calendar />
      </header>
    </div>
  );
}

export default App;