[React] 리액트 라이프사이클(생명주기)

 

 

 

리액트 라이프사이클

 

 

리액트 - 컴포넌트 생명주기표

 

컴포넌트 생성 -> 업데이트 -> 제거

 

 

//▼▼▼▼▼▼▼▼▼▼ 리액트 컴포넌트 생명주기 ▼▼▼▼▼▼▼▼▼▼

constructor(){
	// 메서드 바인딩 및 state 초기화할 때 사용
}

componentDidMount(){
    // 처음에만 실행되며, 다음 랜더링할때는 실행 안함.
    // 외부에서 데이터를 불러온다면 네트워크 요청 작업에 적절한 위치
    // AJAX, SetTimeout, setInterval 사용에 적절한 위치
}

// 				▼

shouldComonentUpdate(nextProps, nextState, nextContext) { //성능최적화용
	if(this.state.value !== nextState.value){
    	return true; //렌더링 함
    }
    return false; //렌더링 안함
}

// 				▼

componentDidUpdate(){
	// 리렌더링 후에 실행됨. 최초 렌더링시에는 실행X
    // 이전 props를 비교하여 네트워크 요청을 보내는 작업에 적절한 위치
}

// 				▼

componentWillUnMount(){
	// 컴포넌트가 마운트 해제 직전 실행.
    // 네트워크 요청 취소, componentDidMount()에서 생성된 작업 등을 정리
    // 컴포넌트 렌더링은 안되므로 setState 사용 금지
}

 

 

자주 사용되는 4가지

 

 

componentDidMount()

- 처음 한 번만 실행되며, 다음 랜더링할때는 실행을 안함.

- 외부에서 데이터를 불러온다면 네트워크 요청 작업에 적절한 위치

- AJAX, SetTimeout, setInterval 사용에 적절한 위치

 

 

shouldComonentUpdate(nextProps, nextState, nextContext)

- 성능최적화용으로 이전 스테이트 값의 변화를 구분하여 렌더링 유무를 리턴함.

- 퓨어컴포넌트와 비슷하지만 shouldComonentUpdate가 커스텀으로 사용 가능

 

 

componentDidUpdate()

- 리렌더링 후에 실행되며, 최초 렌더링시에는 실행 안함

- 이전 props를 비교하여 네트워크 요청을 보내는 작업에 적절한 위치

 

 

componentWillUnMount(){

-컴포넌트가 마운트 해제 직전 실행

-네트워크 요청 취소, componentDidMount()에서 생성된 작업 등을 정리

-컴포넌트 렌더링은 안되므로 setState 사용 금지