React 생명주기 (componentdidmount 와 useEffect)

React Life Cycle

React에서 클래스형 컴포넌트에서 생명주기에서

생성 될 때(mounting)

1. constructor

2. getDerivedStateFromProps : props와 state 비교

3. render

4. React Dom 업데이트

5. componentDidMount : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출

Component가 update 될 때

1. getDerivedStateFromProps : props와 state 비교

2. shouldComponentUpdate : new props, state를 확인하고 rerender 할 것인지 결정

3. rerender

4. getSnapshotBeforeUpdate: 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다.

이 메서드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있다. 이 메서드가 반환하는 값은 componentDidUpdate()에 인자로 전달된다.

5. React DOM update

6. componentDidUpdate:  갱신이 일어난 직후에 호출

Component Unmount

1. componentWillUnmount

 

useEffect

useEffect는 componentDidMount 대체해서 사용할 수 있다.

이 친구는 리액트 컴포넌트가 랜더링 될 때마다 특정작업을 실행할 수 있도록 하는 Hook이다.

useEffect(() => {
	//// xxx 변수가 바뀌면 이 부분에 적힌 코드를 실행.
}, [xxx]);

만약 빈괄호를 썼다면, rendering 후 한번만 호출이 된다. 따라서 componentDidMount 대체해서 사용할 수 있다.

 

참고자료

React Lifecycle Methods diagram

 

[React] useEffect와 hook 생명주기(life-cycle)