TIL No.19[セッション]ライフサイクル&条件レンダリング

ライフサイクルとは?

어떠한 컴포넌트가 렌더가 될 때 하나의 라이프사이클 기본순서는
1. constructor
2. render
3. componentDidMount
4. (fetch 완료)
5. render
6. (setState)
7. componentDodUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
 - 최초 렌더는 완료가 되었으나, 데이터만 변경(Update)가 필요한 경우 실행
 - ex) 마켓컬리에서 A의 상품을 클릭 후, 뒤로가기 후, B의 상품을 눌렀을 경우
8. componentWillUnmount
 - 이벤트 배너 or 타이머 기능이 있을 경우, 종료되었을 때 마운트 해제가 되게끔 하기 위한 메서드
 

親/子ライフサイクル

親子のライフサイクル順序

1. 부모 컨스트럭터
2. 부모 렌더
3. 자식 컨스트럭터
4. 자식 렌더
5. 자식 콤디마
6. 부모 콤디마

条件付きレンダリング

例:モデルウィンドウの作成(下の画像を参照)

this.state = {
	isModalView: false
};

handleModal = () => {
	this.setstate({ isModalView: !this.state.isModalView})
}

<button onClick = {this.handleModal}>
  버튼을 누르면 모달창 뜸
</button>

// 부모 컴포넌트 리턴문 안
{this.state.isModalView && <Modal handleModal={this.handleModal}}

// 자식 컴포넌트 이벤트가 실행 될 태그
<button onClick={this.props.handleModal}>Close</div>

// 렌더 함수의 리턴문 안에 &&연산자를 사용하여 자식 컴포넌트에 close 버튼에 이벤트 부여
// 이벤트를 부모의 함수(handleModal)를 프롭스로 불러오고,
// 클릭이 실행되면 `isModalView`가 false가 되어 모달창이 닫힌다.