7日目

58536 ワード

テキストリンク

ライフサイクル関数として扱われるライフサイクル

ライフサイクル関数はクラス構成部品でのみ使用できます.
ライフサイクルが重要であることを知っていますが、なぜ関数型素子がクラス素子より多いのでしょうか.
これは、応答式マニュアルでより多くの関数要素が推奨されているためです.
(React HooksはReaction 16.8バージョンから登場し、ライフサイクル関数の代わりに使用できます.)
より多くのライフサイクル関数は、正式な書類で見つけることができます.😉

3) constructor()
コンストラクション関数とも呼ばれます.コンポーネントが作成されると、呼び出された最初の友達です!

4) render()
構成部品の形状を定義する友達!
ここでstate,propsにアクセスしてデータを表示することもできます.
反応元素をreturnに入れて返してくれたのを覚えていますか?
render()の内容は、素子の形状にのみ関係することが望ましい.
つまり、stateやpropsに触れてデータを変更しようとすることはできません.

5) componentDidMount()
コンポーネントが画面に表示される「マウント」(Mount)を示します.didMount()の意味はインストールが完了したということでしょうか?
この関数は、1回目のレンダリングが完了した後にのみ実行されます.構成部品の再レンダリングは実行されません.
通常、ajaxリクエスト、イベント登録、関数呼び出しが処理されます.
さらに、バーチャルドームが実際のドームに上がった後は、DOM関連の処理が可能!

6) componentDidUpdate(prevProps, prevState, snapshot)
DidMount()が1回目のレンダリング後に呼び出される関数である場合、DidUpdate()はレンダリングが完了した後に実行される関数です.
この関数には、prevPropsとprevStateの2つの重要なパラメータがあります.各更新の前はprops、stateです.以前のデータと比較する必要がある場合は、インポートして書き込みます.
DidUpdate()を実行すると仮想ドームも実際のドームに上がるのでDOM処理が可能!

7) componentWillUnmount()
DOMから構成部品を削除するときに実行する関数.
スクロール位置を追跡しているか、イベントリスナーを登録している場合は、ここで無効にする必要があります.
コンポーネントがなければイベントしか残っていないわけにはいかないでしょう.

Component

コンポーネントはクラスと関数に分けられます.
今、部品はあまり使いにくいですが、2つのことを知っておく必要があります.
→すでに開発されたプロジェクトなので(おそらく皆さんが行く会社も…!)銀系素子を使用している可能性もあります.コードの変更状況を少なくとも理解して理解したほうがいい.
上の反応はレゴラーメン素子がブロック!

Componentはウェブサイトの破片で、私たちはこれらの破片を集めてウェブサイトに撒きます.
サイトを彫るのが上手な人==反応が上手な人

StateとProps

State

state는 Component가 가지고 있는 데이터입니다.

頭の中に何のデータがありますか.
→ロゴ画像の経路、メニュー名(オンライン、オフライン、企業研修、私の教室)!

これらのデータは私のコンポーネントでは使用されないでしょう.

これは、構成部品にのみ情報が書き込まれることを意味する.

stateは、主に1つの素子にのみ使用される情報を作成および変更するためのデータである.

作成および変更は、構成部品内でのみ行われます.私のですから、生成も修正も自由です!

Props

propsは、コンポーネントが親コンポーネントから受信したデータです.

所有する画像パスを渡すと、その画像パスは素子のpropsになります.

すなわち、親コンポーネントから受信したデータをpropsと呼ぶ.

では、親構成部品が持つデータを追加または変更できますか?
Propsで受信したデータを変更できません!他人だから!

関数型コンポーネント

レスポンスコーディング規則1:
フォルダは小文字で始まるキャビネットを使用します
JSファイル、構成部品名大文字で始まるcamel case
//レスポンスパッケージを読み込みます.
import React from 'react';
//関数要素はこのように書くことができます.
//function Bucketlist(props){
// return (
//願い事リスト
// );
//}
このように書くこともできます.追加された関数を矢印関数と呼びます.
//矢印関数を使用します.
//あ()中に道具が!親コンポーネントから受信したデータ.
//js関数が受け入れる値は、受け入れる値と同じです.
const BucketList = (props) => {

// 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
return (
    <div>
        버킷 리스트
    </div>
);

}
//作成した関数構成部品をエクスポートします.
//exportでは、他の構成部品からBucketList構成部品をロードできます.
export default BucketList;
アプリもありますjsに戻り、BucketListコンポーネントをロードします.

import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';

function App() {

  return (
    <div className="App">
      <h1>내 버킷리스트</h1>
      {/* 컴포넌트를 넣어줍니다. */}
      <BucketList/>
    </div>
  );
}

export default App;

はクロムに戻り、素子が現れているかどうかを確認します.

画面をきれいに撮れ!styled-components

パッケージのインストール
ターミナルに入力
yarn add styled-components

styled-コンポーネントとは?

classネーミングから解放されます!

コンポーネントにスタイルを書き込むので、シンプルで直感的!

CSS-In-JSライブラリの1つ!
コンポーネントに直接スタイルを追加する方法だと思います.

使用方法

先にインポート!
import styled from "styled-components";
例)

Ref

しかし、ある入力ボックスからテキストを取得したい場合は、どのようにアクセスすればいいですか?
(render()終わったら持って来ればいいですか?それともMountが終わった後ですか?
いいえ、その前に仮想ドームから持ってきたのですか?それともDOM?😖)
→答えは、反応要素から!

react要素1:reactをインポートする方法。createRef()

react要素2:reactをインポートする方法。useRef()

useref()は反応フックの1つである.🙂
反フックの使い方はとても簡単です!

ステータス管理

一方向データ・ストリームとは?

名前から感じたのかな?
データは上から下へ、親から子へです.
どうして一方的に書くのですか.

ライフサイクルとともに考える
親構成部品のステータスを更新すると、子構成部品も再レンダリングされます.
サブエレメントの状態が変化した場合は、親エレメントとしてpropsを受け入れます.
子部品が更新されると、親部品も更新されるのではないでしょうか.
ああ...サブエレメントが再レンダリングされます.😢

ジェネリック構成部品

クラス構成部品からステータスを管理-setState()

ライフサイクルを見たときに短く見たsetState()!
ジェネリック構成部品のステータスを更新するときに使用する関数.

(1)新たなCRAの作成

yarn create react-app nemo

(2) App.jsをclass型素子に変えてスタート!

// App component를 class형으로!
import React from 'react';

class App extends React.Component {

  constructor(props){
    super(props);

    this.state = {}
  }

  componentDidMount(){

  }
  
  render(){

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

export default App;

(3)stateにcountという変数を追加し、四角い格子をcount数字として表示する

Array.from()詳細→

import React from "react";

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

    this.state = {
      count: 3, // 숫자넣기!
    };
  }

  componentDidMount() {}

  render() {
    // 배열을 만듭니다.
    // Array.from()은 배열을 만들고 초기화까지 해주는 내장 함수입니다.
    // Array.from()의 첫번째 파라미터로 {length: 원하는 길이} 객체를,
    // 두번째 파라미터로 원하는 값을 반환하는 콜백함수를 넘겨주면 끝!
    // array의 내장함수 대부분은 콜백 함수에서 (현재값, index넘버)를 인자로 씁니다.
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);

    // 콘솔로 만들어진 배열을 확인해봅니다. 숫자가 0부터 순서대로 잘 들어갔나요?
    console.log(nemo_count);

    return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

(4)プラスマイナスボタンを作成し、

return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}

        <div>
          <button>하나 추가</button>
          <button>하나 빼기</button>
        </div>
      </div>
    );

(5)関数の作成

	addNemo = () => {
    // this.setState로 count를 하나 더해줍니다!
    this.setState({ count: this.state.count + 1 });
  };

  removeNemo = () => {
    // 네모 갯수가 0보다 작을 순 없겠죠! if문으로 조건을 걸어줍시다.
    if (this.state.count > 0) {
      // this.setState로 count를 하나 빼줍니다!
      this.setState({ count: this.state.count - 1 });
    }else{
      window.alert('네모가 없어요!');
    }
  };

(6)つなぎましょう!

return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div
              key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}

        <div>
          {/* 함수를 호출합니다. 이 클래스 안의 addNemo 함수를 불러오기 때문에 this.addNemo로 표기해요. */}
          <button onClick={this.addNemo}>하나 추가</button>
          <button onClick={this.removeNemo}>하나 빼기</button>
        </div>
      </div>
    );

(7)完全コード

グリッド補完

import React from "react";

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

    this.state = {
      count: 3, // 숫자넣기!
    };
  }

  componentDidMount() {}

  addNemo = () => {
    // this.setState로 count를 하나 더해줍니다!
    this.setState({ count: this.state.count + 1 });
  };

  removeNemo = () => {
    // 네모 갯수가 0보다 작을 순 없겠죠! if문으로 조건을 걸어줍시다.
    if (this.state.count > 0) {
      // this.setState로 count를 하나 빼줍니다!
      this.setState({ count: this.state.count - 1 });
    }else{
      window.alert('네모가 없어요!');
    }
  };

  render() {
    // 배열을 만듭니다.
    // Array.from()은 배열을 만들고 초기화까지 해주는 내장 함수입니다.
    // Array.from()의 첫번째 파라미터로 {length: 원하는 길이} 객체를,
    // 두번째 파라미터로 원하는 값을 반환하는 콜백함수를 넘겨주면 끝!
    // array의 내장함수 대부분은 콜백 함수에서 (현재값, index넘버)를 인자로 씁니다.
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);

    // 콘솔로 만들어진 배열을 확인해봅니다. 숫자가 0부터 순서대로 잘 들어갔나요?
    console.log(nemo_count);

    return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div
              key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}

        <div>
          {/* 함수를 호출합니다. 이 클래스 안의 addNemo 함수를 불러오기 때문에 this.addNemo로 표기해요. */}
          <button onClick={this.addNemo}>하나 추가</button>
          <button onClick={this.removeNemo}>하나 빼기</button>
        </div>
      </div>
    );
  }
}

export default App;

関数構成部品

関数構成部品からステータスを管理-useState()

今回は、関数素子にstateを書き込む方法を見てみましょう.
関数型素子はクラスのように独自のstateを持たないがreact hooksを使用してstateを持つことができる!

(1)Nemo構成部品の作成
後で新しい関数型構成部品を作成する場合は、ファイルを作成したり、関数型構成部品シェルを作成したりしてください.忘れないでexport!😉

import React from "react";

const Nemo = (props) => {

    // 반환할 리액트 요소가 없을 때는 null을 넘겨주세요! 처음 껍데기 잡으실때도 null을 넘겨주면 굳!
    return null;
}

export default Nemo;

(2)アプリケーションからの読み込み

// import 먼저 하고
import Nemo from "./Nemo";
...
      <div className="App">
{/*컴포넌트 불러다 쓰기*/}
        <Nemo/>
     ...

...

(3)useState()を使用してcountをstateに登録する

	// count에는 state 값이, setCount는 count라는 state 값을 수정하는 함수가 될거예요.
  // useState(초기값): () 안에 초기값을 넣어줍니다.
  const [count, setCount] = React.useState(3);

(4)ビューの作成(=戻る反応元素の作成)、

const nemo_count = Array.from({ length: count }, (v, i) => i);
  // 반환할 리액트 요소가 없을 때는 null을 넘겨주세요!
  return (
    <div className="App">
      {nemo_count.map((num, idx) => {
        return (
          <div
            key={idx}
            style={{
              width: "150px",
              height: "150px",
              backgroundColor: "#ddd",
              margin: "10px",
            }}
          >
            nemo
          </div>
        );
      })}

      <div>
        <button>하나 추가</button>
        <button>하나 빼기</button>
      </div>
    </div>
  );

(5)関数を作成し、

const addNemo = () => {
    // setCount를 통해 count에 저장된 값을 + 1 해줍니다.
    setCount(count + 1);
  };

  const removeNemo = () => {
    // setCount를 통해 count에 저장된 값을 - 1 해줍니다.
    // 이번엔 if문 대신 삼항 연산자로 해볼거예요!
    setCount(count > 0 ? count - 1 : 0);
  };

(6)つなぎましょう!

			<div>
        {/* 함수를 호출합니다. */}
        <button onClick={addNemo}>하나 추가</button>
        <button onClick={removeNemo}>하나 빼기</button>
      </div>

(7)完全コード

import React from "react";

const Nemo = (props) => {
  // count에는 state 값이, setCount는 count라는 state 값을 수정하는 함수가 될거예요.
  // useState(초기값): () 안에 초기값을 넣어줍니다.
  const [count, setCount] = React.useState(3);

  const addNemo = () => {
    // setCount를 통해 count에 저장된 값을 + 1 해줍니다.
    setCount(count + 1);
  };

  const removeNemo = () => {
    // setCount를 통해 count에 저장된 값을 - 1 해줍니다.
    // 이번엔 if문 대신 삼항 연산자로 해볼거예요!
    setCount(count > 0 ? count - 1 : 0);
  };

  const nemo_count = Array.from({ length: count }, (v, i) => i);
  // 반환할 리액트 요소가 없을 때는 null을 넘겨주세요!
  return (
    <div className="App">
      {nemo_count.map((num, idx) => {
        return (
          <div
            key={idx}
            style={{
              width: "150px",
              height: "150px",
              backgroundColor: "#ddd",
              margin: "10px",
            }}
          >
            nemo
          </div>
        );
      })}

      <div>
        {/* 함수를 호출합니다. */}
        <button onClick={addNemo}>하나 추가</button>
        <button onClick={removeNemo}>하나 빼기</button>
      </div>
    </div>
  );
};

export default Nemo;

本当に大切な部分必ずマスターして、混同しないでください!
特に私が素子→stateを作る順番!まずビューを作成→stateを作成(デフォルトも設定!)→stateを操作するものを作る→接続!
この順番が大事!
今日はとても疲れたようです.
繰り返しが重要に見えます.必ず繰り返します.
気まぐれ
私は多くの不足があって、他の人と同じ時間を勉強することができません.
われわれはもっと努力しなければならない.

Reference

この問題について(7日目), 我々は、より多くの情報をここで見つけました https://velog.io/@minkuk90/7일차

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

bootstrap switch機能

Webサーバ