Lifecycle

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

constructor

render

componentDidMount

把持完了

render

setState

コンポーネント更新可能

componentWillUnmount

サブ構成部品が複数の場合
サブ1 renderサブ1 componentDid->サブ2 renderサブ2 componentDid
非順序
子1 render子2 render->子1 componentDid子2 componentDid
順番です.

条件付きレンダリング

定義ていぎ:構成部品関数で特定の値に基づいて選択的にレンダリング
条件が異なる場合は、3つの演算子を使用します.
条件であれば、&&演算子を使用すると読みやすいです.

ex)
 class Welcome extends Component {
  render() {
	const { isLogin, name, point } = this.props;
	  return {
		<div>
		  {isLogin && (
			<div>
			  <p>{name}님 환영합니다!</p>
			  <p>현재 보유중인 포인트는 {point}원 입니다.</p>
			</div>
		 	)}
		 	</div>
			}
		}

ライフサイクルに関連するエラーハンドル
ある瞬間にその値が空になっても、すぐにエラーが発生します.
ライフサイクルを正しく理解すれば、この問題は簡単に解決できます.
条件付きレンダリング時にコンポーネントDidUpdateが発生します.
このような条件に誤りを予防する