패스트캠퍼스 한 번에 끝내는 프론트엔드 개발(Online) 강의 정리

---

Ch.5 React Component Styling (2)

4. Styled Components (1)

src/App.js

import './App.css';
import StyledButton from './components/StyledButton'; // 추가

function App() {
  return (
    <div className={stlyes["App"]}>
      <header className={styles["header"]}>
        <img src={logo} className={styles["logo"]} alt="logo" />
      </header>
      <StyledButton>버튼</StyledButton> // 추가
    </div>
  );
}

src/components/StyledButton.jsx

import styled from 'styled-components';

const StyledButton = styled.button` // 문자열
  background: transparent;
  border-radius: 3px;
  border: 1pxo solid red;
  color:red;
  margin:0 1em;
  padding: 0.25em 1em;
  font-size:20px;
`;

export default StyledButton;

<button class="sc-gtsrHT bNahjN">버튼</button>

Styled-components에 작성한 스타일이 임의의 클래스 형태로 추가되어 DOM에 뿌려짐

Props로 style 표현하기

src/App.js

import './App.css';
import StyledButton from './components/StyledButton';

const PrimaryStyledButton = styled(StyledButton)`
      background:red;
      color:#fff;
`;

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

const MyButton = (props) => <button className={props.className} children={`MyButton ${props.children} `} />; // className이 들어오도록
const StyledMyButton = styled(MyButton)`
      background: transparent;
      border-radius: 3px;
      border: 1pxo solid ${props => props.color || "red" }; // 특정 값을 받아서 함수를 통해서 return, props를 받아서 조건부로 처리
      color: ${props => props.color || "red" }; // 특정 값을 받아서 함수를 통해서 return, props를 받아서 조건부로 처리
      margin:0 1em;
      padding: 0.25em 1em;
      font-size:20px;

      :hover { border:2px solid red; }

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


function App() {
  return (
    <div className={stlyes["App"]}>
      <header className={styles["header"]}>
        <img src={logo} className={styles["logo"]} alt="logo" />
      </header>
      <StyledButton>버튼</StyledButton>
      <StyledButton primary>버튼</StyledButton> // props
      <PrimaryStyledButton>버튼</PrimaryStyledButton>
      <StyledButton as="a" href="/">버튼</StyledButton> // a태그처럼 설정
      <StyledButton as={UppercaseButton}>button</StyledButton> // as로 특정 컴포넌트에 스타일지정
      <StyledMyButton>button</StyledMyButton>
      <StyledMyButton color="green">button</StyledMyButton>
    </div>
  );
}

src/components/StyledButton.jsx

import styled from 'styled-components';

const StyledButton = styled.button` // 문자열
  background: transparent;
  border-radius: 3px;
  border: 1pxo solid red;
  color:red;
  margin:0 1em;
  padding: 0.25em 1em;
  font-size:20px;

  ${props => props.primary &&
    css`
      background:red;
      color:#fff;
    `
  }
`;

export default StyledButton;

• 장점 : Styled Component를 사용할 경우 Scope 오염을 막을 수 있음
• 단점 : 다만 이렇게 각각 처리하면 전역적으로 처리할 수 없음

전역적으로 스타일 지정

src/App.jsx

import './App.css';
import StyledButton from './components/StyledButton';
import styled, { createGlobalStyle } from "styled-components"; // 추가

const GlobalStyle = createGlobalStyle` // 전역 지정
  
  button { color:yellow;
  
  }
`;

function App() {
  return (
    <div className={stlyes["App"]}>
      <header className={styles["header"]}>
        <img src={logo} className={styles["logo"]} alt="logo" />
      </header>
      <StyledButton>버튼</StyledButton>
      <StyledButton primary>버튼</StyledButton> // props
      <PrimaryStyledButton>버튼</PrimaryStyledButton>
      <StyledButton as="a" href="/">버튼</StyledButton> // a태그처럼 설정
      <StyledButton as={UppercaseButton}>button</StyledButton> // as로 특정 컴포넌트에 스타일지정
      <StyledMyButton>button</StyledMyButton>
      <StyledMyButton color="green">button</StyledMyButton>
    </div>
  );
}

src/components/StyledA.jsx

import styled from "styled-components";

const StyledA = styled.a.attrs(props => ({ // 속성 설정
  target: "_blank";
}) )`
  color: ${ (props) => props.color };
`;

export default StyledA;

src/App.jsx

import './App.css';
import StyledButton from './components/StyledButton';
import StyledA from './components/StyledA';

function App() {
  return (
    <div className={stlyes["App"]}>
      <header className={styles["header"]}>
        <img src={logo} className={styles["logo"]} alt="logo" />
      </header>
      <StyledA href="https://www.google.com">태그</StyledA> // a태그
    </div>
  );
}

5. React Shadow

Shadow DOM

캡슐화된 "그림자" DOM 트리를 엘리먼트 — 메인 다큐먼트 DOM 으로부터 독립적으로 렌더링 되는 — 를 추가하고 연관된 기능을 제어하기 위한 JavaScript API 의 집합. 이 방법으로 엘리먼트의 기능을 프라이빗하게 유지할 수 있어, 다큐먼트의 다른 부분과의 충돌에 대한 걱정 없이 스크립트와 스타일을 작성할 수 있습니다.
출처 - MDN 웹 컴포넌트 https://developer.mozilla.org/ko/docs/Web/Web_Components

src/App.js

import logo from './logo.svg';
import root from "react-shadow";

const styles = `
  // src/App.css에 있던 내용 전체를 복사해오기
`;

function App() {
  return (
    <root.div> // 최상위로 감싸기 (외부와 연결되지 않은 자체 다큐멘트)

      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="App-logo" />
          <p>Edit <code>src/App.js</code> and save </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">Learn React</a>
        </header>
      </div>

      <styled type="text/css">{styles}</styled> // styles 불러오기

    </root.div>

  )
}

root.div는 외부에 영향을 주지 않는다

---

이어서.