리액트 라이프 사이클

리액트의 컴포넌트는 생성(Mount), 업데이트(Update), 제거(Unmount)되는 세가지의 라이프 사이클을 가지고 있다.

• 클래스형 컴포넌트 : component 상속 필수, render() 메소드 필수
• 함수 컴포넌트 : react hook 사용, useState/useEffect 사용해서 state, lifeCycle 메소드 따로 구현해야함

---

클래스형 컴포넌트

1. Mount

컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출

1. constructor()
   • state를 초기화하거나 인스턴스에 이벤트 처리 메서드를 바인딩할때
2. static getDerivedStateFromProps()
3. render()
   • 클래스 컴포넌트에서 반드시 필요, 함수 컴포넌트에선 render()없이 return()에서 컴포넌트 렌더링
   • 컴포넌트의 state를 변경🙅, 브라우저와 직접적으로 상호작용🙅
   • 호출될 때마다 동일한 결과를 반환🙆
4. componentDidMount()
   • 컴포넌트가 마운트된 직후(트리에 삽입된 직후, 화면에 나타났을 때) 호출
   • 네트워크 요청을 보내기 적절한 위치, 데이터 구독을 설정하기 좋은 위치
   • DOM속성을 읽거나 직접 변경하는 작업을 진행

2. Update

props/state가 변경될때, 컴포넌트가 다시 렌더링될 때 순서대로 호출

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
   • 갱신이 일어난 직후 호출
   • 반환값이 없다면 해당 인자는 undefined, 기본적으로 true를 반환하며 false를 반환할 경우에는 render함수를 호출하지 않음.
   • 추가적인 렌더링을 유발. 컴포넌트 최적화 작업에 유용. 리액트에서 변화가 발생하는 부분만 업데이트를 해줘서 성능이 좋아짐. 변화하지 않은 부분은 리렌더링을 하지 않아 불필요한 렌더링을 줄일 수있다.
3. render()
4. getSnapshotBeforeUpdate()
   • 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출
   • 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 변경되기 전에 얻을 수 있음
   • return 값은 snapshot or null
5. componentDidUpdate()
   • 업데이트가 발생(리랜더링)한 직후에 호출
   • 이시점에서 this.porps 와 this.state 가 바뀌어있다. 파라미터를 통해서 이전값을 조회 할 수 있음.

3. Unmount

컴포넌트가 DOM 상에서 제거될 때에 호출

1. componentWillUnmount()
   • 마운트 해제되고 파괴되기 직전에 호출
   • 여기서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행. setState() 호출🙅
   • 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않음.

함수 컴포넌트

useEffect를 통해 mount, update, unmount 처리 가능

https://ko.reactjs.org/docs/react-component.html
useEffect+함수 컴포넌트 👉 https://guiyomi.tistory.com/21
https://adjh54.tistory.com/43