리액트 라이프 사이클

리액트에는 각 컴포넌트가 mounting, updating, unmounting 될 때

자동적으로 호출되는 메소드들이 있다.

이를 라이프 사이클 메소드라고 부른다.

 

 

 

Mounting

 

1. constructor

 

컴포넌트가 생성될 때 제일 먼저 호출되는 함수다.

constructor를 쓰려면 먼저 super(props);를 호출해야 한다.

이로써 React.Component를 상속하게 된다.

state 값을 초기화하는 곳이기도 하다.

 

constructor(props) {

    super(props);

    this.state = { color: 'red' };

}

 

2. getDerivedStateFromProps

 

render 메소드 바로 직전에 호출 된다.

props에서 받은 값으로 state를 초기화하기 좋은 위치다.

 

static getDerivedStateFromProps(props, state) {

    return { color: props.favcol };

}

 

3. render

 

실제로 HTML을 돔으로 출력하는 메소드다.

 

4. componentDidMount

 

렌더링이 끝나고 호출 된다.

 

 

 

Updating

 

1. getDerivedStateFromProps

 

위와 동일

 

2. shouldComponentUpdate

 

boolean 값에 따라 렌더링 할지 말지를 정해준다.

 

shouldComponentUpdate() {

    return false;

}

 

3. render

 

HTML을 돔으로 다시 렌더링한다.

 

4. getSnapshotBeforeUpdate

 

업데이트 이전의 props와 state를 가져올 수 있다.

이 메소드를 쓸 경우에는 componentDidUpdate 메소드를 꼭 써야한다.

그렇지 않으면 오류가 발생한다.

 

getSnapshotBeforeUpdate(prevProps, prevState) {

}

 

5. componentDidUpdate

 

업데이트가 끝나고 호출 된다.

 

 

 

Unmounting

 

1. componentWillUnmount

 

컴포넌트가 돔에서 지워지기 전에 호출 된다.

 

 

 

참고 : https://www.w3schools.com/react/react_lifecycle.asp