ライフサイクル

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

constructor

render

componentDidMount

(キャプチャ完了)

(setState)

render

コンポーネント更新

componentWillUnmount

親-子ライフサイクル

親APIから受信したデータをpropsとしてサブAPIに渡し、サブAPIでデータにアクセスする

構成部品を上記のように構成すると、以下のように表示されます.

条件付きレンダリング

要素関数で特定の値に基づいて選択的にレンダリングされることを조건부 렌더링(conditional rendering)と呼ぶ.
条件付きレンダリングを実施する場合、3つの演算子が有用である場合がありますが、ほとんどの場合、&&연산자の方が読み取り可能です.

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

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

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

「オープンスポーツ」?の

list && list.map((item, index) => {...})

list?.map((item, index) => {...})

また、上記のコードを光学ギャップでより簡潔に表示することもできます.以下に示します.

ライフサイクルの順序によっては、上記のエラーが発生する可能性がありますので、必要に応じて条件を使用してレンダリングしてください.