TIL 50 Lifeループと条件付きレンダリング

ライフサイクルのデフォルト順序

constructor

render

componentDidMount

(キャプチャ完了)

再レンダリング

(setState)

コンポーネント更新

componentWillUnmount

ライフサイクルメソッドを使用して、

ステータスのデータを変更し、その内容を更新します.

の1つの詳細ページ上の要素のデータのみを交換するので、データを交換した後、再ログインする必要があります.

最初にログインした構成部品のデータを変更する場合は、ステータスを変更する必要があります.当時使われていた方法はComponentDidUpdate

を生成してもよいし、消失してもよい.このときの使い方は、ComponentWillUnmountです.
普通は使えます.あるイベントが終わってから終わるために.
タイマー機能を備えた構成部品に使用します.

設定Stateは、Stateを再設定するたびにLANDERになりますが、パッチ関数を再呼び出すにはコンポーネントDidUpdateが必要です.

新しいデータを受信する必要がある場合、コンポーネントDidMountは使用できません.そのため、新しいデータをComponentDidUpdateで取得する必要があります.

親-子ライフサイクル

は、親APIから受信したデータをpropsとしてサブAPIに渡し、サブAPIのデータにアクセスする.
要素は独立していてもよいし、ある要素内の要素であってもよい.これが親子の関係です.

このような状況はどのような順序で行われますか?

1.親構造関数
2.親レンダリング(親レンダリングの子に移動)
3.サブコンストラクタ
4.子表示
5.サブアセンブリDidMount(ここまで、親アセンブリに移動)
6.親コンポーネントDidMount
7.親取得の完了(setStateオカレンス>オカレンスの更新>再表示)
8.親レンダリング(親レンダリングのサブアセンブリに移動)
9.子の表示
10.サブアセンブリDidUpdate
(ComponentDidMountでは最初のレンダリングのみが実行されるため、ComponentDidUpdateが発生し、ここまでで親に戻ります.)
11.親コンポーネントDidUpdate
(コンポーネントDidMountは初期レンダリングを1回のみ実行するため、コンポーネントDidUpdateが発生します)

サブアイテムで条件付きレンダリングを使用する

データをマウントしたり、コンポーネントの内部からバックエンドから必要なデータを受信したりするときに、コンポーネントDidMountメソッドでパッチ関数を使用します.

パッチ関数で受信したデータをステータスに入れます.

アレイのデータ型を分解する場合?
マッピング・メソッドを使用して、配列データのオブジェクトまたは値を新しい配列にインポートします.

条件付きレンダリング？

&&演算子(最終演算子)-論理演算子.
特定の条件が満たされている場合に表示され、満たされていない場合にレンダリングする必要がない場合は、条件演算子で実現できます.

赤の部分は、「this.state.data[0]がtrueの場合のみ、this.state.data[0].nameがレンダリングされます.」
上記のように、私が欲しいデータがある場合にのみ、ログインさせることでエラーを解決できます.

&&演算子を使うときの注意点!

変数が数値タイプの場合、0はfalseです.

変数が文字列タイプである場合、空の文字列“”もfalseである.

{this.state.data.message &&
this.state.data.message.map((msg, idx) => {
return <li key={idx}> {msg}</li>;
})}

値がある場合はマッピング関数を返します.
LANDERに必要なデータを受信する前にマッピング関数を迂回しようとするのはエラーです.
模唱?元のページにもう一つのウィンドウが表示されます.パスが移動していません.

this.state= {
isMondalView: false
}

handleModal = () => {
//console.log("클릭"); 
}

<button className="addToCart" 
  onclick={this.handleModal}>구매하기</button>

//클릭이 먹히는 것을 확인.

this.state= {
this.setState({isModalView: !this.state.isModalView})
}

handleModalon = () => {
this.setState({isModalView: true})
}

handleModalOff = () => {
this.setState({isModalView: false})
}

//-> 중복되는 두 함수를 하나의 함수로 합해준 것.

return (
<>
{this.state.isModalView && 
  <Modal handleModal={this.handleModal} />}

//그리고 자식 컴퍼넌트에 props 넘겨주기

<button onClick={this.props.handleModal}>close</button>