React Styled-Components

리액트를 사용할 때 css처럼 사용하려면 어떻게 할까?
Styled Components를 이용하면 된다.

사용 방법

import styled from "styled-components";

1. Styled-Components import해 불러와준다.

2. vscode-styled-components 라는 에디터도 설치해주자
   

---

구분할 수 있는 태그로 변경해 작업을 해보겠다.

return (
    <RootDiv>
      <AppHeader>
        <AppLogo src={logo} alt="app" />
        <p>
          Styled 적용을 위해 변경 된 App.js Edit <code>src/App.js</code> and
          save to reload.{' '}
        </p>
        <MyA
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </MyA>
      </AppHeader>
    </RootDiv>
  );

---

이제 변수선언 구간에 Styled-Components작업해보기

 const RootDiv = styled.div` //변수로 해당 태그이름 지정, 태그 속성을 작업
    text-align: center; //실제 css 서언 구간
  `;

1.변수로 해당 태그 이름 지정
2.styled.해당 속성 기업
3. ``백틱 사이에 css style 입력

styled-components 선언

const RootDiv = styled.div`
    text-align: center;
  `;
  const AppHeader = styled.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;
  `;
  const AppLogo = styled.img`
    height: 40vmin;
    pointer-events: none;
    @media (prefers-reduced-motion: no-preference) {
      animation: App-logo-spin infinite 20s linear;
    }
  `;
  const MyA = styled.a`
    color: #61dafb !important;
  `;

전체 코드

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

function AppCopy() {
  const RootDiv = styled.div`
    text-align: center;
  `;
  const AppHeader = styled.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;
  `;
  const AppLogo = styled.img`
    height: 40vmin;
    pointer-events: none;
    @media (prefers-reduced-motion: no-preference) {
      animation: App-logo-spin infinite 20s linear;
    }
  `;
  const MyA = styled.a`
    color: #61dafb !important;
  `;
  return (
    <RootDiv>
      <AppHeader>
        <AppLogo src={logo} alt="app" />
        <p>
          Styled 적용을 위해 변경 된 App.js Edit <code>src/App.js</code> and
          save to reload.{' '}
        </p>
        <MyA
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </MyA>
      </AppHeader>
    </RootDiv>
  );
}

export default AppCopy;

---

완성 이미지