React Component Styling

woom·2023년 6월 24일
React
0

React

목록 보기
7/9
post-thumbnail

출처 : 패스트캠퍼스 한 번에 끝내는 프론트엔드 개발 초격차 패키지

📕 Style Loaders

  1. npx create-react-app style-loaders-example (Happy hacking!이 뜨면 성공)
  2. 생성된 파일로 들오가서 npm run eject : webpack(파일 확장자에 맞는 loader에게 위임)설정을 살펴보기 위한 과정
  • webpack.config.js에 많은 loader들이 설정되어 있음 => webpack에 대한 기능 이해와 create-react-app이 어떤 확장자를 어떻게 처리하는지 확인 가능
    • ex) .css확장자를 가진 파일을 어떻게 처리하는지 확인(style file에 대한 정규표현식)
  • 정규표현식 영역은 어떤 loader를 사용할지를 선택하는 공간
    • css파일이면서(cssRegex) module.css와는 다르게 loader를 사용하며(exclude) loader는 getStyleLoaders라고 하는 곳에서 가져온 결과물을 사용(use)
    • import styles from './App.module.css';

📙 CSS, SASS

  • App.css
    • import './App.css'; : import순서(index.css → App.css)에 맞춰 전역적으로 스타일(css 파일) 지정됨
    • create-react-app에서 설정을 통해 import
    • react 자체적으로, 독립적으로 컴포넌트 별로 스타일을 줄 수 있는 방법 제공되지 않음
  • 한계 : 스타일이 중복되지 않도록 팀 내부적으로 규칙을 정해서 규칙에 맞게 클래스를 사용하는 것이 중요
    • ex. .클래스이름 .header
    • BEM(Block Element Modifier) : naming 방법론 중 하나
  • App.scss
    • 다른 문법을 사용해서 작성해도 css로 변형되어 사용 가능
    • 특정 영역안에 위계별(클래스:App안에 header, logo)로 스타일 작성
    • sass 모듈 설치해야함npm i sass
.App {
text-align: center;

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

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

📒 CSS, SASS module 방식

  • module : 전역적으로 오염되지 않게 사용하겠다.
  • module.css
    • import styles from "./App.module.css";
    • 실제 작성한 코드를 변환 후 전역으로 추가
    • import한 styles객체가 원래 이름에 변경된 클래스 이름을 매칭하여 부여
    • {styles['클래스이름']} 이렇게 작성하면 알아서 매칭해서 고유의 이름 부여
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>
        <a
          className={styles["link"]}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

📌 classnames

  • classname을 쉽게 작성할 수 있도록 도와주는 라이브러리

    • npm install classnames
    • classnames : 함수
    • import classNames from "classnames";
    • false인 값들은 적용하지 않음(ex. null, 0, false, 빈문자열, undefined, {baz:null})

  • 기존 : className={ this.state.loading ? `${styles["button"]} ${styles[loading]}` : styles["button"]

  • 라이브러리 이용 : className={classNames(styles["button"], {loading: this.state.loading})}

    • 단점: class이름이 변형되지않고 loading으로 저장됨
    • bind활용 (classnames에서 css module을 이용)
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}
		//loading이 true일 경우에만 클래스 이름으로 지정
        className={cx("button", { loading })}
        {...this.props}
      />
    );
  }

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

📗 Styled Component 방식

  • 스타일을 지원하는 라이브러리 (별도의 css모듈 사용하지 않아도 됨)

    • emotion 라이브러리
    • styled components

  • styled components 설치

    • npm install styled-components
    • npm install styled-components@5.3.10 : 버전때문에 에러가 발생할 경우 버전5로 설치!

  • styled components 사용 (백틱기호안에서 사용-문자로 오타발견 어려움)

    • props사용시 ${표현식}으로 작성
import styled, { css } from "styled-components";

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

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

export default StyledButton;

  • as속성 : 특정 엘리먼트 지정
  • target="_BLANK" : 새창에서 열기
import styled, { createGlobalStyle } from "styled-components";
import "./App.css";
import StyledButton from "./components/StyledButton";
import logo from "./logo.svg";
import StyledA from "./components/StyledA";

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

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

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

//글로벌스타일
const GlobalStyle = createGlobalStyle`
button {
  color: yellow;
}
`;

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

  :hover {
    border: 2px solid red;
  }

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

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

export default App;

📘 React Shadow

  • 웹 컴포넌트 : 컴포넌트의 표준

    • shadow DOM : 본래의 html에 영향을 주지 않는 별도의 html덩어리

  • react-shadow 설치
    npm i react-shadow

  • root.div영역에만 스타일 적용 가능

    • 공통적으로 넣어야하는 스타일인 경우 반복적으로 넣어주어야 함
    • 외부와 내부가 차단되어서 값을 받아서 상대적인 표현시 제약 존재
import logo from "./logo.svg";
import root from "react-shadow";

const styles = `
.App {
  text-align: center;
}
.App-logo {
  height: 40vmin;
  pointer-events: none;
}
p {
  color: yellow;
}

`;

function App() {
  return (
    <root.div>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <style type="text/css">{styles}</style>
    </root.div>
  );
}

export default App;

📚 Ant Design

  • npm i antd
  • npm install --save @ant-design/icons : 이이콘용 따로 설치해야함

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 fullscreen={false} />
      </header>
    </div>
  );
}

export default App;

component를 라이브러리로 제공받는 경우에 props가 무엇인지 확인하는 것이 가장 중요!!

  • API항목(Props) : 원하는 기능을 사용하기 수월함
  • import {Row, Col} from 'antd';
    • ant의 전체 column: 24
    • < Col span={24중에 어느정도 차지할 지 정수} />
     <Row>
    <Col span={12} style={colStyle()}>
    <Col span={12} style={colStyle()}>
</Row>
    • < Row gutter={16+8n의 정수} /> : column사이에 gutter만큼 띄우겠다
    <Row gutter={16}>
    <MyCol span={12}>
    <MyCol span={12}>
</Row>
    • offset : column은 offset다음에 차지 (12를 뛰은 후 12차지)
    <Row gutter={16}>
    <MyCol span={12} offset={12}>
</Row>
  • < Row type="flex" justify="좌우정렬" align="위아래정렬" />
    • start, center, end, space-between, space-around
    • top, middle, bottom
profile
woom
Study Log 📂
이전 포스트

React Ant Design (UI 구성 요소 라이브러리) - bizspring

다음 포스트

React 실전 활용

0개의 댓글

관련 채용 정보