[反応ベースクラス]2週目-styled-connts

styled-componentsとは?
その利点は、構成部品のモデリング方法の1つにクラス名を指定する必要がないことです.また、コンポーネントに直接スタイルを書き込むため、作成と修正が容易で直感的です.
1.インストール項目

yarn add styled-components

以前インストールしたプロジェクトとは異なり、sytled-componentsは私の反応プロジェクトにパッケージをインストールします.だからパスは私がインストールするプロジェクトに設定しなければなりません.package.json>dependenciesには、プロジェクト用のすべてのパッケージが記録されているためです.
2.応用
2-Ⅰ. import

import styled from "styled-components";

2-Ⅱ. オブジェクト

const MyStyled = styled.div`
  width: 50vw;
  height: 150px;
  background: skyblue;
  `;

2-1からstyledがインポートされたため、styledというオブジェクトを作成する必要があります.オブジェクト内では、cssのような方法でstyleを与えることができます.
2-Ⅲ. render

  render() {
    return (
      <div className="App">
        <MyStyled/>  
      </div>
    );
  }

宣言されたオブジェクトをrenderに入れると適用されます.
3. props

<MyStyled bg_color={"red"}/>

bg colorという道具をあげました.style-componentsもコンポーネントなのでpropsを提供できます.

const MyStyled = styled.div`
  width: 50vw;
  height: 150px;
  background-color: ${(props) => (props.bg_color)};
`;

これはpropsで受信したデータからbg colorを取り出す様子です.backtick(`)内で、アイテムで取得したデータを利用する場合は${자바스크립트}を使用します.returnと同様に、3つの演算子と変数を使用できますが、if文とfor文は使用できません.
かっこ関数{}

${(props) => {
	return props.bg_color;
    }}

矢印関数=>

${(props) => (props.bg_color)

カッコ{}式を矢印関数と略記します.
さんこうえんざんし

<MyStyled bg_color={"true"}/>

${(props) => (props.bg_color? "blue" : "green")};

3つの演算子を使用する場合は、次のことも適用できます.
4. SCSS
SCSS文法とは?
CSSをより効率的かつ容易に使用するために作成された言語.CSSとCSSの拡張構文SASSの中間部分と考えられる.
例

html

<MyStyled>
    <div>
    	<p>hello, world!</p>
    </div>
</MyStyled> 

CSS

.MyStyled {
	margin: auto;
    }
.MyStyled > div {
	width: 50vw;
    	height: 150px;
        background: skyblue;
        }
.MyStyled > div > p {
	color: white;
    }
.MyStyled > div > p:hover {
	color: yellow;
    }

.MyStyled {
	margin: auto;
    div {
    	width: 50vw;
    	height: 150px;
        background: skyblue;
        	p {
            	    color: white;
                    &:hover: { color: yellow; }
                }
     }
}                            

例をSCSS構文に変換します.親クラスを1つずつ記録する必要がないため、経済的でhtmlのような構造を持つため、直感的です.これはNestingです.バーチャルセレクタを使用する場合、&を加えます.&は私自身を指します.
🧠 Quiz
前回作成した遺願リストのstyleをcssからstyled-componsesに変換します.
正解
App.js

render() {
    return (
      <div className="App">
        <Container>
          <Title >내 버킷리스트</Title>
          <Line/>
          <BucketList list={this.state.list} />
        </Container>
      </div>
    );
  }

const Container = styled.div`
  max-width: 350px;
  min-height: 80vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
`;

const Title = styled.h1`
  color: slateblue;
  text-align: center;
`;

const Line = styled.hr`
  margin: 16px 0px;
  border: 1px dotted #ddd;
`;

BucketList.js

import React from 'react';
import styled from "styled-components";

    const my_lists = list;

    return (
        <div>
            {
                my_lists.map((list, index) => {
                    console.log(list);
                    return (
                        <ItemStyle key={index}>
                            {list}
                        </ItemStyle >
                    );
                })
            }
        </div>
    );
}

const ItemStyle = styled.div`
    padding: 26px;
    margin: 8px;
    background-color: rgb(250, 247, 216);
`;

export default BucketList;

ノートをまちがえる

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: ["Eternals", "First Cow", "Seberg", "French Dispatch"],
    }
  }

  render() {
    return (
      <Back>
        <MyStyled>
          <div>
            <h2>개봉예정작</h2>
            <hr/>
            <ListItem list = {this.state.list}/>
          </div>
        </MyStyled>    
      </Back>
    );
  }

const Back = styled.div`
background-color: #eee;
height: 100vh;
width: 100vw;
display: flex;
`;

const MyStyled = styled.div`
  height: 80vh;
  background-color: #fff;
  width: 50vw;
  max-width: 350px;
  margin: auto;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
    h2 {
      color: rgb(146, 105, 184);
      text-align: center;
    }
    hr {
      margin: 16px 8px;
    }
`;

const ListItem = styled.div `
  padding: 26px;
  margin: 8px;
  background-color: rgb(250, 247, 216);
`;

正解はstyledコンポーネントをできるだけ多く使用するために、コンポーネントにオブジェクトを指定しましたが、Nestingを使用してコードを簡略化しました.ここまでは方式の違いで、propsで受け取った<ListItem list = {this.state.list}/>部分が間違っていました.BucketList.jsにデータを送るのを忘れました.だから<ListItem list = {this.state.list}/>はアプリですjsではなくBucketListjsではstyle-componentsを使用するべきです.BucketList.jsでもアプリです.jsと同様にstyle-componentsをインポートしてconstを使用すればよい.エラーの答えに従って記入すると、ブラウザにはpropsのデータが含まれず、styleのみが出力されます.