React) css modules 사용하기

css 스타일링시 3가지 방법에 대해서 배웠는데 여기서는 2번과 3번 사용을 사용하는 것을 포스팅해보겠다!

1. css inline 처리

2. styled component library 사용

3. css module 사용

3번을 사용하여 써보자!

Header.js 라는 파일을 만든다면 똑같은 폴더에 Header.module.css라는 파일을 만들어 그안에 css 적는다. css 적용시 Header.js 폴더에서 import classes from "./Header.module.css"; 로 import 하고 (classes 라는이름은 본인의 선호에 맞게 알아서 지으면됨) 적용시에는 마찬가지로 className쓰고 중괄호 준다음className={classes(본인이 준이름).module.css에서 준이름} 이렇게 적으면됨!

주의할점은 module.css에서 준 이름에 - 가 들어간 경우, 예시에서는 main-image,우리는 점표기법(dot notation) ((.어쩌구) 이렇게 쓰는것) 을 쓰지 못하기 때문에 그럴때
className={classes["main-image"]} 이런식으로 써줘야한다.

//Header.js

import React, {Fragment} from 'react';
import classes from "./Header.module.css";

import mealsImage from "../../assets/Meals.jpeg";

const Header = (props) => {
    return (
        <Fragment>
                <header className={classes.header}>
                    <h1>Haewon's Meals</h1>
                    <button>Cart</button>
                </header>
                <div className={classes["main-image"]}>
                    <img src={mealsImage} alt="cafe highwaste in Jongro, Seoul" />
                </div>
        </Fragment>
    );
};

export default Header;

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

//Header.module.css

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    background-color: #8a2b06;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 10;
  }
  
  .main-image {
    width: 100%;
    height: 25rem;
    z-index: 0;
    overflow: hidden;
  }
  
  .main-image img {
    width: 110%;
    height: 100%;
    object-fit: cover;
    transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem);
  }

또 자주쓴방법은 2번사용해서
styled component 라이브러리를 써서 elements 폴더를 만들어 Button,Input, Grid, Image 등등 용도를 분리해서 공통스타일 파일을 만듦 -> 최소단위 분리하고 스타일을 줌 그걸로 안되는 몇가지는 if로 예외처리.

예시)

Grid.js
import React from "react";
import styled from "styled-components";

const Grid = (props) => {
  const { is_flex, width,maxWidth,padding,margin,bg,color,children,_onClick,
position,justify,height,minHeight,overflow,border,radius,className,align,
borderB,wrap,cursor,mainFrame,navbar,header,menubar, } = props;

  const styles = {
    is_flex: is_flex,
    width: width,
    maxWidth: maxWidth,
    height: height,
    minHeight: minHeight,
    margin: margin,
    padding: padding,
    bg: bg,
    color: color,
    position: position,
    justify: justify,
    overflow: overflow,
    border: border,
    radius: radius,
    className: className,
    align: align,
    borderB: borderB,
    wrap: wrap,
    cursor: cursor,
    mainFrame: mainFrame,
  };

  if (mainFrame) {
    return <MainFrame>{children}</MainFrame>;
  }
  if (header) {
    return <Header {...styles}>{children}</Header>;
  }
  if (navbar) {
    return <Navbar {...styles}>{children}</Navbar>;
  }
  if (menubar) {
    return <Menubar {...styles}>{children}</Menubar>;
  }

  return (
    <React.Fragment>
      <GridBox {...styles} onClick={_onClick}>
        {children}
      </GridBox>
    </React.Fragment>
  );
};

Grid.defaultProps = {
  _onClick: () => {},
};

const MainFrame = styled.div`
  width: 100%;
  height: 100%;
  max-width: 412px;
  min-height: 100vh;
  padding: 42px 16px 48px;
  border: 1px solid #000;
  box-sizing: border-box;
`;

const Navbar = styled.div`
  width: 100%;
  height: 30px;
  justify-content: space-around;
  ${(props) => (props.is_flex ? "display: flex; align-items: center;" : "")};
  ${(props) => (props.margin ? `margin: ${props.margin};` : "")}
`;

const Header = styled.div`
  width: 100%;
  height: 50px;
  text-align: center;
  padding-top: 10px;
  background: orange;
`;

const Menubar = styled.div`
  width: 100%;
  height: 60px;
  border-bottom: 2px solid black;
  justify-content: space-around;
  ${(props) => (props.is_flex ? "display: flex; align-items: center;" : "")};
`;

const GridBox = styled.div`
  width: ${(props) => props.width};
  box-sizing: border-box;
  ${(props) => (props.maxWidth ? `max-width: ${props.maxWidth};` : "")}
  ${(props) => (props.color ? `color: ${props.color};` : "")}
  ${(props) => (props.height ? `height: ${props.height};` : "")}
  ${(props) => (props.minHeight ? `min-height: ${props.minHeight};` : "")}
  ${(props) => (props.justify ? `justify-content: ${props.justify};` : "")}
  ${(props) => (props.padding ? `padding: ${props.padding};` : "")}
  ${(props) => (props.margin ? `margin: ${props.margin};` : "")}
  ${(props) => (props.bg ? `background-color: ${props.bg};` : "")}
  ${(props) => (props.is_flex ? "display: flex; align-items: center;" : "")}
  ${(props) => (props.position ? `position: ${props.position};` : "")}
  ${(props) => (props.border ? `border: ${props.border};` : "")}
  ${(props) => (props.borderB ? `border-bottom: ${props.borderB};` : "")}
  ${(props) => (props.radius ? `border-radius: ${props.radius};` : "")}
  ${(props) => (props.overflow ? `overflow: ${props.overflow};` : "")}
  ${(props) => (props.className ? `className: ${props.className};` : "")}
  ${(props) => (props.align ? `text-align: ${props.align};` : "")}
  ${(props) => (props.wrap ? `flex-wrap: ${props.wrap};` : "")}
  ${(props) => (props.cursor ? `cursor: ${props.cursor};` : "")}
  &::-webkit-scrollbar {
    display: none;
  }
  border: 1px solid black;
`;