20210608 React06 : Styled-Components 패키지, 웹 컴포넌트, Shadow DOM, React-shadow 패키지, Ant Design

6 분 소요

React 06

Styled Components

react, CRA를 통해서가 아닌 별도의 라이브러리를 이용해서 편하게 사용하는 방법
Styled-Components Official Site
styled Components : 컴포넌트 자체에 style이 있어 별도의 css, css module 필요 없이 하는 방식
- styled components, emotion 등이 있음
설치 : npm i styled-components

기본 사용법

styled-components를 import로 연결하여 styled객체를 가져와서 사용함
ES6에서 제공하는 Tagged Template Literals 기능을 활용함
- styled-components : Tagged Template Literals
- more explaination : TTL
사용하는 태그이름을 속성으로 연결하고, 옆에 ` `` `를 붙여 안에 CSS 내용을 적으면 됨
그리고 그것을 export 해서 사용하고자 하는 곳에서 component로 사용하면 style이 적용되어 져서 나타남
그리고, dev tool에서 확인해보면 styled-component가 알아서 클래스를 생성하여 스타일을 지정하고, 해당 component에 집어 넣어줌
styled-component를 통해서 만들어진 component의 경우 기본적으로 props로 children과 className을 가지고 있음
- styled component 에서 children은 component에서 사용된 inner, className은 SC 가 임의적으로 붙인 className임

import styled 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;
`;

export default StyledButton;

import logo from "./logo.svg";
import "./App.css";
import StyledButton from "./components/StyledButton";

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

export default App;

props 를 가진 component의 경우 (props에 따른 style 제어)

<StyledButton primary={true}>버튼</StyledButton> 표현과 <StyledButton primary>버튼</StyledButton>는 같은 표현임
primary라는 props를 넣음

import logo from "./logo.svg";
import "./App.css";
import StyledButton from "./components/StyledButton";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>base</StyledButton>
          <StyledButton primary>primaryProp</StyledButton>
        </p>
      </header>
    </div>
  );
}

export default App;

해당 백틱안에 사용해서 ${}을 사용하여 안에 함수를 넣어 사용함
함수는 props를 받아 && 논리 연산자를 통해서 지정한 props가 있으면 css가 표현 될수 있게 설정함
css라는 키워드를 앞에 넣어주어 더 명시적으로 css임을 알수있게 함

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;

기존의 컴포넌트를 활용하여 style을 추가한, 새로운 컴포넌트 만들기

styled 객체를 함수처럼 사용해서 안에 해당 컴포넌트를 넣고 옆에 `` 안에 추가적인 css를 넣어 가능함
이를 받아와 바로 사용하면 component가 됨

import logo from "./logo.svg";
import "./App.css";
import StyledButton from "./components/StyledButton";
import styled from "styled-components";

// 기존 컴포넌트에 css 추가 작업 -> 새로운 컴포넌트
const PrimaryStyledButton = styled(StyledButton)`
  background: palevioletred;
  color: white;
`;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>base</StyledButton>
          <PrimaryStyledButton>primaryComponent</PrimaryStyledButton>
        </p>
      </header>
    </div>
  );
}

export default App;

기존 컴포넌트의 스타일만 다른 태그에 사용하고자 하는 경우

컴포넌트의 as 속성에 태그 이름을 넣고, 그 태그에 대한 필수 속성을 지정 해주면 됨
또 as 속성에 특정 component를 넣어 사용도 가능함
as 사용시, 대체 되어지는 component에 props 연결시 Spread syntax사용 가능함

import logo from "./logo.svg";
import "./App.css";
import StyledButton from "./components/StyledButton";

// UpperCaseButton 컴포넌트 - props를 받고 해당 JSX에서 props를 사용 해야함
// children 항목에 함수를 넣어서 children도 바꿀 수 있음
// props = // {children: "button", className: "sc-bdnxRM fLecOq"}
const UpperCaseButton = (props) => (
  <button {...props} children={props.children.toUpperCase()} />
);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>base</StyledButton>
          <StyledButton as="a" href="/">
            asTag
          </StyledButton>
          <StyledButton as={UpperCaseButton}>asComponent</StyledButton>
        </p>
      </header>
    </div>
  );
}

export default App;

js로 만든 컴포넌트를 SC를 통해서 스타일을 입히고 사용하는 경우

SC로 바로 만든 component가 아닌 순수한 컴포넌트의 경우 나중에 sc를 통해서 styled가 되면,
SC의 기본적인 props인 className, children을 순수 컴포넌트 까지 연결 시켜줘야 함
- Spread syntax로 사용하면 안되고 className, children 각각 연결 시켜줘야 함
컴포넌트가 사용되어 지는 경우, props를 받아서 styled에서 css에 활용 될수 있음
그리고, 추가 css 부분에, 가상클래스, 가상요소도 사용할 수 있음

import logo from "./logo.svg";
import "./App.css";
import StyledButton from "./components/StyledButton";
import styled from "styled-components";

// props = {children: "button", className: "sc-dlnjwi jjrKEV"}
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: "@";
  }
`;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledMyButton color="green">propsCustom</StyledMyButton>
        </p>
      </header>
    </div>
  );
}

글로벌 스타일(Global Style) 만들기

이때 까지는 className의 오염을 막기 위해서, componet 마다 독립적인 style을 가질 수 있도록 SC를 활용 했다.
그런데, 전역 스타일로 common Style을 따로 빼서 사용할 수 도 있다.
SC의 createGlobalStyle을 사용해서 만들수 있음

import logo from "./logo.svg";
import "./App.css";
import styled, { createGlobalStyle } from "styled-components";

// Global Style 만들기
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></p>
      </header>
    </div>
  );
}

export default App;

컴포넌트 styled 하면서 속성 까지 지정하기

굳이 component를 사용할 때 component 속성을 같이 제시하지 않고 사용할 수 있음
styled 할때 component에 속성까지 미리 지정해서 반복적인 기본 속성을 독립적으로 사용할 수 있다.

// StyledA.jsx
import styled from "styled-components";

// 새탭에서 열기, 주소 설정
const StyledA = styled.a.attrs((props) => ({
  target: "_BLANK",
  href: "https://google.com",
}))`
  color: ${(props) => props.color};
`;

export default StyledA;

//App.js
import logo from "./logo.svg";
import "./App.css";
import StyledA from "./components/StyledA";

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

export default App;

웹 컴포넌트 (React-Shadow)

컴포넌트 개념에 대한 표준을 이야기 함
MDN : Web_Components

Shadow DOM

본래 html과 영향을 주지 않는 별도의 html 덩어리
style에 대한 완전한 오염을 막는 기술
npm i react-shadow

React-Shadow 사용

react-shadow를 받아 root component를 받아 사용함
<root.div></root.div> 태그 안에 component를 넣고, style 태그를 넣어 작성하면
- 해당 부분만 style 영향을 받음
즉, 오염되지 않고 독립적으로 사용가능 함

import logo from "./logo.svg";
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>
		<p>Go</p>
    // Go는 p 태그 style yellow를 적용 받지 않음
  );
}

export default App;

단점

공통적인 스타일의 경우 계속 반복적으로 작성해줘야 함
외부 내부가 차단되어 있어서, document에서 값을 받아서 사용하기는 힘듦

Ant Design

하나의 컴포넌트 모음
이미 디자인된 component를 사용해서 디자인
npm i antd

전역 스타일, 컴포넌트 사용

import "antd/dist/antd.css"; // 전역 스타일 추가 index.js
import { Calendar } from "antd"; // 리액트 컴포넌트 사용 App.js

부분 스타일, 컴포넌트 사용

import "antd/es/date-picker/style/css";
import DatePicker from "antd/es/date-picker";

자동화 부분 스타일 가져오기

eject를 해야함 -> npm run eject
npm i babel-plugin-import -D

{
  ...
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css",
        }
      ]
    ]
  },
  ...
}

ant design icons

npm i --save @ant-design/icons
Ant Design : icons

ant design layout (Grid)

Row Component
- gutter 속성은 Column 끼리의 떨어짐을 이야기 하고 숫자가 의미하는 단위는 px임
  - <Row gutter={16+8n의 정수}></Row>
  - 16, 24, 32, 40, 48 …
- justify 속성, align 속성
  - <Row type="flex" justify="좌우" align="위아래">
  - start , center, end, space-between, space-around / top, middle, bottom
Col Component
- Column의 경우 전체 24를 기준으로 되어 있음
- Col Component의 span 속성에 값을 넣어 column 크기 조절, 비율을 조정함
  - <Col span={24중의 비율}/>
- offset 속성은 span이 가지고 있는 값중의 일부를 사용해서 사이를 띄움
  - <Col offset={24중 건너띄고 싶은 정수} />

Twitter Facebook LinkedIn

Taeyoung Kim(RaccoonCode96)

20210608 React06 : Styled-Components 패키지, 웹 컴포넌트, Shadow DOM, React-shadow 패키지, Ant Design

React 06

Styled Components

기본 사용법

props 를 가진 component의 경우 (props에 따른 style 제어)

기존의 컴포넌트를 활용하여 style을 추가한, 새로운 컴포넌트 만들기

기존 컴포넌트의 스타일만 다른 태그에 사용하고자 하는 경우

js로 만든 컴포넌트를 SC를 통해서 스타일을 입히고 사용하는 경우

글로벌 스타일(Global Style) 만들기

컴포넌트 styled 하면서 속성 까지 지정하기

웹 컴포넌트 (React-Shadow)

Shadow DOM

React-Shadow 사용

단점

Ant Design

전역 스타일, 컴포넌트 사용

부분 스타일, 컴포넌트 사용

자동화 부분 스타일 가져오기

ant design icons

ant design layout (Grid)

공유하기

참고

[Design Pattern] MVC 패턴

[Node.js] 백준 - 기본 수학 문제 1 : 달팽이는 올라가고 싶다, ACM호텔, 부녀회장이 될테야

[Node.js] 백준 - 기본 수학 문제 1 : 손익분기점, 벌집O(1), 분수찾기O(1)

[Node.js] 백준 - 함수&문자열 문제 : 셀프 넘버, 한수, 아스키 코드, 숫자의 합, 알파벳 찾기, 문자열 반복, 단어 공부, 단어의 개수, 상수, 다이얼, 크로아티아 알파벳, 그룹 단어 체커