[React] Styled-components

React.jsスタイルを適用する最適なスタイルコンポーネントライブラリと呼ばれるライブラリについて説明します.
styled-componsesは何ができますか?
たとえば、다크 모드、라이트 모드を使用すると、非常に簡単な方法で作成できます.
どこで使いますか.
Kidhub、グーグル、Spotify、Tinderなど、多くの大手企業がこのライブラリを使用しています.こんな大きな会社で使うのは理由があると思うので、今回はしっかり勉強しておけばいいと思います.
既存の反応からスタイルを適用

htmlドキュメントを処理するように、

はcssファイルをインポートします.

は、styleの要素を直接タグをオブジェクトとして割り当てることにより

である.

ファイル用cssモジュールを作成し、重複しないようにする1番className

上記の3つの方法(다크 모드または라이트 모드など)を使用して機能を作成するには、同じコードに別のクラス(色コードのみ)を追加し、モード変更時にすべて変更する必要があります.△小さいプロジェクトではすぐに変わりますが、大きいプロジェクトではコード管理が難しいのではないでしょうか.
また、コンポーネントを作成するときに上記の3つの方法で記述される場合、cssを表示するために不要なコードが追加されます.各コンポーネントは、cssを表示することなく하나하나であることを望んでいます.
すなわち,タグの内部クラス名(例えば맡은 일을 파악またはdiv)をチェックしなければ,それらがどのような素子であり,どのような役割を果たしているのかを明確に見ることができる.
styled-コンポーネントの適用
npm i styled-componentsspanライブラリをインストールしてください.

import styled from "styled-componets"

インストールされたライブラリをにインポートします.
次に、トップstyled-compoentsをコンポーネント化したいとします.

const Father = styled.div`
	display: flex;
	...
`

const BoxOne = styled.div`
	background-color: teal;
	width: 100px; // 중복
	height: 100px; // 중복
`

const BoxTwo = styled.div`
	background-color: tomato;
	width: 100px; // 중복
	height: 100px; // 중복
`


<Father>
    <BoxOne/>
    <BoxTwo/>
    // ...
    // div안에 들어가는 다른 (태그/컴포넌트)들
    // ...
</Father>

上記のように宣言して使用すればよい.注意すべきは、宣言時にbacktic(`)を使用する必要があります.
また、作成したdivコンポーネントがFatherを自動的に生成し、宣言したスタイルを追加することもブラウザで確認できます.したがって、classNameを独自に使用する方法を考える必要はありません.
BoxOneとBoxTwo冗長
以上、BoxOneとBoxTwoを宣言し、styled-componentsコードを記述したため、유니크한 classNameの機能を十分に利用できなかった.しかしながら、중복되는の機能は素子の機能と同様であり、styled-componentsを同一設計から分離することができる.

const Box = styled.div`
	background-color : ${(props) => props.bgColor};
	width: 100px;
	height: 100px;
`

<Father>
      <Box bgColor="teal"/>
      <Box bgColor="tomato"/>
</Father>

このようにして、styled-componentsというpropsを、他の部分のみを管理するコンポーネントに変換して、BoxOneとBoxTwoの重複コードを回避することができる.
Box構成部品と同じ円を作成
この場合は、Box構成部品を貼り付けるすべてのスタイル属性をコピーしてCircle構成部品を作成する必要があります.
しかしながら、propsは、要素bgColorの機能を提供する.
従来はstyled-componentsを使用しており、括弧(확장)を使用して拡張されている.

const Circle = styled(Box)`
	border-radius: 50px;
`

<Father>
      <Box bgColor="teal"/>
      <Circle bgColor="whitesmoke"/>
</Father>

今回宣言されたstyled.태그は、他の部分のみを展開できるように、別の要素から同じ値を得ることができる.これにより、()から情報を取得する必要がなく、他の要素스타일 컴포넌트を使用することができる.
同じデザインの異なるタグ
たとえば、buttonタグをコンポーネントとして作成し、このボタンコンポーネントの設計をaタグに適用したい場合があります.こんな時はどうすればいいですか?

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`

const Link = styled(Btn)`
  ...
`

リンクがBtnの拡張として作成されると、最終的にはpropsとしてリンクが作成される.
そうでなければ、확장というpropsがBtn要素に伝達され、他のマーカーに変換される.

<Father>
  <Btn>Log in</Btn>
  <Btn as="a" href="login somewhere...">Log out</Btn>
</Father>

aをbutton태그という名前のpropsに変換すると、aを"as"に変換し、タグで使用されるhref属性を使用することができる.
素子にhtml属性を付与する
各inputにrequiredというプロパティをタグ付けしたいとしますが、このinputタグが多すぎると、各inputタグにrequiredを追加するのは難しいです.
ただし、"as"はhtml属性を付加する機能を有する.

const Input = styled.input.attrs({ required: true, minLength: 10 })`
  background-color: tomato;
`

<Father>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
      <Input/>
</Father>

a태그の後にstyled-componentsという名前のメソッドを使用してstyled.inputを挿入するhtmlプロパティを作成すると、すべてのコンポーネントに自動的に適用されます.
アニメーションの適用

import styled, {keyframes} from "styled-components"

アニメーションを有効にするにはketframesをインポートする必要があります.

const rotation = keyframes` // 뺑글뺑글 도는 애니메이션
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
  `;
  
const rotationBack = keyframes` 원 -> 사각형 -> 원 반복
  0% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
  50% {
    transform: rotate(360deg);
    border-radius: 100px;
  }
  100% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
  `;


const Box = styled.div`
    height: 200px;
    width: 200px;
    background: tomato;
    animation: ${rotation} 1s linear infinite;
`;

通常のcssのattrsと同じ効果ですが、styled-componsesのアニメーション管理機能はJavaScriptの객체と同じです.
選択者
ボックスにサブエレメントanimationがある場合は、サブエレメントを選択するために設計する必要はありません.변수エレメントから適切なタグを選択することでスタイルを指定できます.

const Box = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 200px;
    background: tomato;
    animation: ${rotation} 1s linear infinite;
    span { //*** 자식 span태그를 선택합니다.
      font-size: 36px;
      &:hover{
        font-size: 80px;
      }
    }
`;

function App() {
    return (
        <Father>
            <Box>
              <span>😍</span>
            </Box>
        </Father>
    );
}

また、独自のセレクタ<span>😍</span>を使用して、Boxのタグにより快適なスタイルを指定することもできます.
したがって、すべての要素をコンポーネント化する必要はなく、span:hover styledおよび他の&(앰퍼센드)を処理するだけでよい.
コンポーネントセレクタ
ただし、spanラベルではなく、直接シェイプを個別に作成した構成部品に拡張することもできます.한번의 중괄호를 열어서を한 컴포넌트만とマークして選択する場合は、どうすればいいですか?

const Emoji = styled.span`
  font-size: 36px;
`
const Box = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 200px;
    background: tomato;
    animation: ${rotation} 3s linear infinite;
    ${Emoji} { // 
      &:hover{
        font-size: 80px;
      }
    }
`;

function App() {
    return (
        <Father>
            <Box>
              <Emoji as="p">😍</Emoji>
            </Box>
        </Father>
    );
}

アニメーションで見たように、JavaScriptのtargetのように使用でき、選択要素も<span>のように使用できます.Emoji要素が변수から변수に変更されても、要素セレクタは、要素自体をEmojiに変更することができる.