생명주기(LifeCycle)란

인간의 생명주기와 비슷하다 크게 리액트 앱의
1. Mounting(탄생)
2. Updating(변화)
3. Unmounting(소멸) 로 나누어 볼 수 있다.

사진출처
https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

Class Version

Mounting

1. constructor

컴포넌트가 시작되었을때 가장 먼저 호출된다.
그러므로, 앱이 시작되었을 때 바로 실행시켜야 하는 함수는
constructor 안에 넣어주는 것이 좋다
주로 State를 만들어둔다

2. render 실행

UI를 그린다.

3. DOM이 업데이트 됨

4. componentDidMount

컴포넌트의 UI 세팅이 완전히 완료되면 알려준다
주로 AIP를 불러오는 코드가 들어간다.

Updating

: 앱이 켜진 후 state 값 등이 바뀔 때

1. render 실행

state나 props의 변경이 있거나 업데이트를 강요할 때 실행된다

2. componentDidUpdate

render가 완료되면 실행된다.
state를 업데이트 하더라도 비동기적으로 처리되기 때문에
업데이트 되었다는 것을 확인하기 위해 사용된다.

Unmounting

componentWillUnmount

앱이 종료될 때 실행되는 함수이다.

Function Version

함수형 컴포넌트에 사용되는 생명주기 함수는
React Hook이라고 할 수 있다.

useEffect

useEffect('콜백함수','배열') 총 배열을 2개 받는다.
사용 용도가 2가지가 있다.

1. componentDidMount 대체

매개인자 중 콜백함수만 넣으면
componentDidMount와 같은 역할을 한다.
주로 초기 API를 불러올 때 사용한다.

2. componentDidUpdate 대체

1과 달리 배열 안에 state값이 들어가면
componentDidUpdate와 같은 역할을 한다.
배열이기 때문에 여러개의 값을 넣을 수 있어 매우 효율적이다.

여러개의 값을 넣는 경우 배열 안 state값 중 하나라도 변경되면 실행되며,
모든 값이 바뀌어도 한 번만 실행한다.

독립적으로 state변경을 체크하고 싶다면 useEffect를 하나 더 사용하면 된다