[React]라이프사이클 메서드

라이프사이클 메서드

- 컴포넌트를 처음 렌더링할 때나 업데이트할 때 처리해야 할 작업을 실행시키는 메서드.

- 라이프사이클 메서드는 클래스형 컴포넌트 에서만 사용.

  (단, 함수형 컴포넌트는 Hooks를 사용하여 비슷한 작업을 실행할 수 있음.)

- Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행하는 메서드이고, 

  Did접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행하는 메서드로 구분. 

 

 

컴포넌트가 업데이트 되는 경우.

1. Props가 바뀔 때

2. state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. this.forceUpdate로 강제로 렌더링을 트리거할 때 

---

 

출처:  http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

 

1. constructor

 컴포넌트 생성자 

 컴포넌트를 만들 때 처음 실행되는 메서드로, state를 초기화할 때 사용

constructor(props){
	super(props);
    state = {
    	number:0,
        color:null
    }
}

 

2. getDerivedStateFormProps

마운트될 때, 업데이트가 시작되기 전에 호출됨.

props의 변화에 따라 state 값에도 변화를 주소싶을 때 사용. 

static getDerivedStateFormProps(nextProps, prevState){
	if(nextProps.color !== prevState.color){	//조건에따라 특정 값 동기화
    	return {color: nextProps.color};
    }
    return null;	//state를 변경할 필요가 없으면 null  반환
}

 

3. render

화면에 UI표시

render() { 
	return (
		<div>화면에 표시</div>
	);
}

 

4. ComponentDidMount

렌더링 직후 실행.

다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나

이벤트등록, 네트워크 요청같은 비동기 작업 처리

 

5. shouldComponentUpdate

컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정하는 메서드. 

true를 반환하면 다음 라이프사이클 메서드를 계속 실행, false를 반환하면 작업 중지.(리렌더링x)

메서드를 작성하지 않으면 default true

특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로render함수를 호출함.

shouldComponentUpdate(nextProps, nextState){
	//현재 props = this.props, 현재 state = this.state
	//업데이트 될 props = nextProps, 업데이트 될 state = nextState
    if(this.state.color === nextState.color) 
    	return false;
}

 

6. getSnapshotBeforeUpdate

render에서 만들어진 결과물이 브러우저에 실제로 반영되기 직전에 호출.

업데이트하기 직전의 값을 참고할 일이 있을 때 활용. 

//리렌더링 전에 기존  state값을 저장
getSnapshotBeforeUpdate(prevProps, prevState){
	if(prevProps.color !== this.props.color){
		return this.myRef.style.color;
	}
	return null;
}

 

7. componentDidUpdate

컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

prevProps, prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근.

getSnapshotBeforeUpdate에서 반환값이 있다면 세번쨰 파라미터(snapshot)으로 접근.

componentDidUpdate(prevProps, prevState, snapshot){
	if(snapshot){
    	console.log('color before update: ' + snapshot);
    }
}

 

8. componentWillUnmount

컴포넌트가 언마운트되기 전에 호출하는 메서드.

componentDidMount에서 등록한 이벤트, 타이머 등 직접 생성한 DOM이 있다면 여기서 제거. 

componentWillUnmount(){
	console.log("종료")
}

 

9. 에러처리 메서드

하위 컴포넌트에서 오류가 발생했을 때 호출. 

오류를 처리하는 별도의 컴포넌트를 생성한 후 상위 컴포넌트에서 실행.

 

getDerivedStateFormError

파라미터로 오류를 전달받고, state를 갱신하여 다름 렌더링에서 대체 UI를 표시.

render 단계에서 호출되므로 별도의 이벤트를 발생시키면 안됨.

getDerivedStateFormError(error){
    return {hashError: true};
}

 

componentDidCatch

오류내용과, 어떤 컴포넌트가 오류를 발생했는지에 대한 객체 정보 두가지 파라미터를 전달받음.

커밋단계에서 호출되므로 별도 이벤트를 발생시켜도 됨.

오류 로그 기록 등에 사용.

 

componentDidCatch(error, info){
	logComponnetstackToMyService(info.componentStack);
}

 

 

 

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)

ko.reactjs.org/docs/react-component.html#componentdidcatch