Day 6-コンテナ-プレゼンテーションモード/props/setStateモーション原理/Nullishマージ

今日、Container-presenterモードとstateなどのPropsを学びました.これは戻り素子のデータを処理することができます.

Container-presenterモード

Container-presenterモードはReactの開発時や実際の操作でよく使われるフォルダ構造です。

1つのファイルにコードを記述すると、コードが長すぎて、可読性が悪く、メンテナンスが困難になります。

Container-presenterモードは、主に機能を担当するjs部分と、画面に表示されるUIを担当するjsx部分とを別々に開発する方法である。

Container-Presenterモードなし

// index.js
import { useState } from 'react';
export default function StateSignup() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errorEmail, setErrorEmail] = useState('');
    const [errorPassword, setErrorPassword] = useState('');
    const [join, setJoin] = useState('');
    function changeEmail(event) {
        console.log(event.target.value); 
        setEmail(event.target.value);
    }
    function changePassword(event) {
        console.log(event.target.value);
        setPassword(event.target.value);
    }
    function btnClick() {
        let check = true;
        console.log(`email : ${email}`);
        console.log(`password : ${password}`);
        if (email.includes('@') === false) {
            setErrorEmail('잘못된 이메일 형식입니다.');
            check = false;
        } else {
            setErrorEmail('');
        }
        if (password.length < 8) {
            setErrorPassword('비밀번호를 8자리 이상으로 설정해주세요');
            check = false;
        } else {
            setErrorPassword('');
        }
        if (check) {
            setJoin('회원가입이 완료되었습니다!!');
        }
    }
    return (
        <>
            이메일 : <input type="text" onChange={changeEmail} placeholder="이메일을 입력해주세요" />
            <br />
            <span>{errorEmail}</span>
            <br />
            <br />
            비밀번호 : <input type="password" onChange={changePassword} placeholder="비밀번호를 입력해주세요" />
            <br />
            <span>{errorPassword}</span>
            <br />
            <span>{join}</span>
            <br />
            <br />
            <button onClick={btnClick}>회원가입</button>
        </>
    );
}

これは簡単な会員登録ページコードです.
コードが長くなり、毒性が大幅に低下しました.
このコードにContainer-presenterモードを適用します.

Container-presenterモードの適用

// index.js
import StateSignupContainer from "./StateSignupContainer"
export default function StateSignup() {
    return (
        <>
            <StateSignupContainer>
        </>
    );
}

// StateSignupContainer.js
import { useState } from 'react';
import StateSignupPresenter from "./StateSignupPresenter"
export default function StateSignupContainer() {
  const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errorEmail, setErrorEmail] = useState('');
    const [errorPassword, setErrorPassword] = useState('');
    const [join, setJoin] = useState('');
    function changeEmail(event) {
        console.log(event.target.value); 
        setEmail(event.target.value);
    }
    function changePassword(event) {
        console.log(event.target.value);
        setPassword(event.target.value);
    }
    function btnClick() {
        let check = true;
        console.log(`email : ${email}`);
        console.log(`password : ${password}`);
        if (email.includes('@') === false) {
            setErrorEmail('잘못된 이메일 형식입니다.');
            check = false;
        } else {
            setErrorEmail('');
        }
        if (password.length < 8) {
            setErrorPassword('비밀번호를 8자리 이상으로 설정해주세요');
            check = false;
        } else {
            setErrorPassword('');
        }
        if (check) {
            setJoin('회원가입이 완료되었습니다!!');
        }
    }
    return (
        <>
            <StateSignupPresenter changeEmail={changeEmail} changePassword={changePassword} btnClick={btnClick}>
        </>
    );
}

// StateSignupPresenter.js
export default function StateSignupPresenter(props) {
    return (
        <>
            이메일 : <input type="text" onChange={props.changeEmail} placeholder="이메일을 입력해주세요" />
            <br />
            <span>{errorEmail}</span>
            <br />
            <br />
            비밀번호 : <input type="password" onChange={props.changePassword} placeholder="비밀번호를 입력해주세요" />
            <br />
            <span>{errorPassword}</span>
            <br />
            <span>{join}</span>
            <br />
            <br />
            <button onClick={props.btnClick}>회원가입</button>
        </>
    );
}

このようにjsとjsxを2つのコンポーネントに分離し、ページにインデックスを作成します.jsはcontainer componentをインポートヘッダとして使用します.
Containerコンポーネントには機能(APIなど)が実装され、propsを介してUIを担当するPresenterコンポーネントにデータが渡される.
Containerコンポーネントでは、propsを介してPresenterコンポーネントにデータが渡されます.道具は何ですか.

props

propsはreactのstateなどのデータ型です。

stateは、構成部品でのみ使用可能であることを構成部品に宣言します。

propsは、親コンポーネントから子コンポーネントにデータを渡すオブジェクトです。

(*親構成部品、子構成部品、たとえばA、B、C.A構成部品でB、C構成部品を使用している場合(インポート)、Aは親構成部品、B、Cは子構成部品です.)
(*主に作成された関数またはステータスをサブアセンブリに渡します!)

上記の[コンテンツインスペクタ](Content Checker)モードでは、[コンテンツインスペクタ](Content Checker)が[コンテンツインスペクタ](Content Checker)で使用されるため、[コンテンツインスペクタ](Content Checker)が親になり、[コンテンツインスペクタ](Content Checker)が子になります。

propsの使い方

propsの使い方<サブコンポーネント名props名={value}>はこのような形で提供される.

HTMLのプロパティを定義するように、propsはサブコンポーネントのプロパティとして使用できます。

サブアイテム構成部品は、最初に構成部品を宣言するときにpropsをパラメータとして追加します。

必要な場所で道具を使う。props名を使用すればいいです。

親構成部品

import Children from "./Children";
import { useState } from "react";
export default function Parents(){
	const[hello,setHello] = useState("Hello")
    const onClickBtn = (){
      setHello("안녕하세요");
    }
  return(
    	<Children hello={hello} onClickBtn={onClickBtn} />
    );
}

サブエレメント

export default function Children(props){
 	 return(
    	<button onClick={props.onClickBtn}/>
       	<div>{props.hello}</div>
    );
}
```

setState運動原理

次のStateでは、setStateがどのように機能しているかを簡単にまとめてみましょう。

React StateからsetStateに変更すると、Reactで実行は仮想の一時記憶領域に保存され、実行が完了すると最終的には1回のみレンダリングされます。

簡単に言えば、1つの関数でsetStateを使用して1つのstateを複数回繰り返し変更すると、setStateは実行する必要があるコンテンツを一時記憶領域に保存し、関数の終了時にsetStateのコンテンツを実行します。(setStateはイベントハンドラで非同期で実行されます。)

const [A, setA] = useState(0)
function test(){
	setA(1)
	console.log(A) // 0
}

上記のコードに示すように、state Aの値をseta(1)に変更しますが、testの関数が完了するまでsetaは実行できないためconsoleです.log(A)は0です.

演算子、空のマージ

前のソフトウェアバー-利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用利用

演算子

演算子&&演算子とは逆の機能です.
&&演算子は、条件が真の場合にレンダリングされる演算子です.
演算子は、条件が偽(null、0、")、undefined、NaN、false)の場合にレンダリングされる演算子です.

export default function TestANDRender() {
    const a = true;
    const b = false;
    return (
        <>
            {a || <div>안녕하세요</div>} //화면에는 "반갑습니다"만 렌더링이 되고, 
            {b || <div>반갑습니다</div>} //"안녕하세요"는 렌더링이 되지 않습니다.
        </>
    );
}

Nullish coalescing

Nullish coalieschingは||と少し似ていますが、少し違います.
||||演算子がすべてのfalse値でレンダリングされる場合、Nullish coalizationはnullおよびundefinedでのみレンダリングされます.
Nullish合併は?.

// Nullish coalescing
export default function TestANDRender() {
    const a = null;
    const b = undefined;
    const c = 0;
    return (
        <>
            {a ?? <div>안녕하세요</div>} //화면에는 "안녕하세요", "반갑습니다"가 렌더링이 되고, 
            {b ?? <div>반갑습니다</div>} //"잘부탁합니다"는 렌더링이 되지 않습니다.
            {c ?? <div>잘부탁합니다</div>}
        </>
    );
}

ジェーンの一言
やっと道具を覚えた👏 👏 👏 👏 👏
propsを利用して、container-presenterモードも可能になりました!
stateとpropsをもっと練習します🔥 🔥 🔥