React 리액트 - 컴포넌트(component)

 

 

component

 

 

 

 

<BasicButton.jsx>

import React from 'react';
import Button from './style';

const BasicButton = ({size, shape, variant, border, font, color, children}) => {

  return (
    <Button size={size} shape={shape} variant={variant} border={border} font={font} color={color}>
      {children}
    </Button>
  );
};

export default BasicButton;

 

 

: size={""} shape={""} variant={""} border={""} font={""} color={""}
-> 사용하고자 하는 요소들의 key값을 비구조할당함

 

 

<style.js>

import styled, {css} from "styled-components";
import { flexCenter } from "../../styles/common";

const variantCSS = {
  primary : css`
    background-color: ${({theme}) => theme.PALETTE.primary["main"]};
  `,
  sub : css`
    background-color: ${({theme}) => theme.PALETTE.primary["sub"]};
  `,
  white : css`
    background-color: ${({theme}) => theme.PALETTE["white"]};
  `
};

const borderCSS = {
  primary : css`
    border: solid 1px ${({theme}) => theme.PALETTE.primary["main"]};
  `,
  sub : css`
    border: solid 1px ${({theme}) => theme.PALETTE.primary["sub"]};
  `,
  gray100 : css`
    border: solid 1px ${({theme}) => theme.PALETTE.gray["100"] };
  `,
  gray200 : css`
    border: solid 1px ${({theme}) => theme.PALETTE.gray["200"] };
  `,
  gray300 : css`
    border: solid 1px ${({theme}) => theme.PALETTE.gray["300"] };
  `
};

const colorCSS = {
  primary : css`
    color: ${({theme}) => theme.PALETTE.primary["main"]};
  `,
  sub : css`
    color: ${({theme}) => theme.PALETTE.primary["sub"]};
  `,
  white : css`
    color: ${({theme}) => theme.PALETTE["white"]};
    `,
  black : css`
    color: ${({theme}) => theme.PALETTE["black"]};
  `,
  gray100 : css`
    color: ${({theme}) => theme.PALETTE.gray["100"] };
  `,
  gray200 : css`
    color: ${({theme}) => theme.PALETTE.gray["200"] };
  `,
  gray300 : css`
    color: ${({theme}) => theme.PALETTE.gray["300"] };
  `
};

const shapeCSS = {
  default: css``,
  small : css`
    border-radius: 10px;
  `,
  large : css`
    border-radius: 20px;
  `,
  big : css`
    border-radius: 30px;
  `,
  round : css`
    border-radius: 50%;
  `,
}

const sizeCSS = {
  small : css`
    width: 64px;
    height: 32px;
    padding: 16px 0;
  `,
  medium : css`
    width: 96px;
    height: 48px;
    padding: 16px 0;
  `,
  large : css`
    width: 128px;
    height: 64px;
    padding: 16px 0;
  `,
  full : css`
    width: 100%;
    aspect-ratio: 8 / 1;
    padding: 16px 0;
  `,
}

const fontCSS = {
  h1 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h1"]};
    line-height: ${({theme}) => theme.FONT_LINE["h1"]};
  `,
  h2 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h2"]};
    line-height: ${({theme}) => theme.FONT_LINE["h2"]};
  `,
  h3 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h3"]};
    line-height: ${({theme}) => theme.FONT_LINE["h3"]};
  `,
  h4 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h4"]};
    line-height: ${({theme}) => theme.FONT_LINE["h4"]};
  `,
  h5 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h5"]};
    line-height: ${({theme}) => theme.FONT_LINE["h5"]};
  `,
  h6 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h6"]};
    line-height: ${({theme}) => theme.FONT_LINE["h6"]};
  `,
  h7 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h7"]};
    line-height: ${({theme}) => theme.FONT_LINE["h7"]};
  `,
  h8 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h8"]};
    line-height: ${({theme}) => theme.FONT_LINE["h8"]};
  `,
  h9 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h9"]};
    line-height: ${({theme}) => theme.FONT_LINE["h9"]};
  `,
}

const Button = styled.button`

  ${({variant}) => variantCSS[variant]};
  ${({shape}) => shapeCSS[shape]};
  ${({size}) => sizeCSS[size]};
  ${({border}) => borderCSS[border]};
  ${({color}) => colorCSS[color]};
  ${({font}) => fontCSS[font]};
  ${flexCenter};
`;

export default Button;

 

 

style.js 컴포넌트에서 필요한 항목을 가져와 정의

 

 

<theme.js>

const theme = {};
  theme.PALETTE = {
    primary: {
      main: "#ffd159",
      sub: "#fff4d8"
    },
    secondary: "#f1ebf5",
    white: "#fff",
    black: "#000",
    gray: {
      100: "#f1ebf5",
      200: "#aea8be",
      300: "#605866"
    },
    error: "#eb6144",
    background: {
      white: "#eee",
      gray: "#f1ebf5",
      black: "#333"
    }
  }

  theme.FONT_SIZE = {
    h1: "55px",
    h2: "40px",
    h3: "30px",
    h4: "21px",
    h5: "18px",
    h6: "16px",
    h7: "13px",
    h8: "11px",
    h9: "8px"
  }

  theme.FONT_WEIGHT = {
    thin: "100",
    regular: "400",
    bold: "800",
  }

  theme.FONT_LINE = {
    h1: "75px",
    h2: "55px",
    h3: "41px",
    h4: "29px",
    h5: "25px",
    h6: "22px",
    h7: "17px",
    h8: "12",
    h9: "8"
  }

export default theme;

 

 

<common.js>

import { css } from "styled-components"
// styled 내부에 있는 css를 가져와 사용

export const flexColumn = css`
  display: flex;
  flex-direction: column;
`

export const flexRow = css`
  display: flex;
  flex-direction: row;
`

export const flexCenterColumn = css`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

export const flexCenterRow = css`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`

// 공통적으로 사용하는 테마를 가져와 적용
export const h1Bold = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h1"]};
  line-height: ${({theme}) => theme.FONT_LINE["h1"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["bold"]};
`

export const h3Regular = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h3"]};
  line-height: ${({theme}) => theme.FONT_LINE["h3"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["regular"]};
`

 

 

<Styled06.jsx>

import React from 'react';
import BasicButton from '../../components/button/BasicButton';

const Styled06 = () => {
  return (
    <div>
      <h1> 컴포넌트</h1>
      <BasicButton 
        size={"medium"} shape={"small"} variant={"primary"} border={""} font={"h3"} color={"white"}
      >LOGIN
      </BasicButton>
      <BasicButton 
        size={""} shape={""} variant={"sub"} border={""} font={""} color={""}
      >LOGIN
      </BasicButton>
      <BasicButton 
        size={""} shape={""} variant={"white"} border={""} font={""} color={""}
      >LOGIN
      </BasicButton>
      <BasicButton 
        size={""} shape={""} variant={""} border={""} font={""} color={""}
      >LOGIN
      </BasicButton>
    </div>
  );
};

export default Styled06;

 

 

재사용을 위한 컴포넌트 구조로

페이지에서 각각의 요소값을 쉽게 변경할 수 있음

 

-> 중복되는 세팅을 하나로 사용 가능함

=> 초반 세팅이 오래 걸리지만 수정 및 재사용이 용이하다

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일