[16] State Lifecycle

State Lifecycle

리액트 컴포넌트에는 라이프사이클(Life Cycle)이 존재한다.
액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 한다던지 컴포넌트 업데이트 전후에 처리해야 할 작업이 있다면 이때 리액트 컴포넌트 라이프사이클(Life Cycle) 관련 함수들을 사용해 이를 처리한다.

라이프 사이클 함수종류

render ()
constructor
getDerivedStateFromProps
componentDidMount
shouldComponentUpdate
getSnapShotBeforeUpdate
componentDidUpdate
componentWillUnmount

will 이 붕틑 함수는 어떤 작업을 처리하기 직전에 호출되는 함수이고
did가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수이다.

컴포넌트 라이프 사이클은 크게
Mount / Update / UnMount 3가지로 분류된다.

1. Mount : Dom 객체가 생성되고 브라우저에 나타나는 것을 의미한다. 이떄 호출되는 함수는 아래와 같다.

2. Update: 컴포넌트가 업데이트 될 때 실행되는 함수들을 보면 컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우가 있다.

3. UnMount: 컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 한다. 호출되는 함수는 하나로 componentWillUnmount 함수이다. 해당 컴포넌트가 제거되기 직전에 호출된다.

함수형 컴포넌트에서 Life-Cycle 생명주기

리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트 기능을 구현한 개념이다. 클래스 컴포넌트에서만 사용 가능했던 state를 hook을 이용해 함수형 컴포넌트에서도 useState를 이용해서 상태 변수를 선언할 수 있다. 또한
useEffect를 통해 리액트 클래스의 라이프 사이클을 관리할 수 있다.

Hook 에서는 useEffect()가 위 생명주기 함수들을 대체한다.

기본형태

useEffect (() =>{
	console.log("");
})

useEffect는 기본적으로
componentDidMount,
componentDidUpdate,
componentWillUnmount,
getDerivedStateFromProps 의 역할을 모두 수행한다.

참고
https://lktprogrammer.tistory.com/130