component LifeCycle 생명주기

 

Mount

1. constructor
   a. 컴포넌트가 맨 처음 만들어 질 때 호출
   b. 생성자
2. getDerivedStateFromProps
   a. 부모 컴포넌트로부터 props를 전달 받을 때, state에 값을 일치시키는 역할 을 하는 메서드
   b. 마운트 될 때, 리렌더링 될 때도 호출
3. render 화면에 그리는 메소드
   a. 최초 mount가 준비완료되면 렌더링하는 메서드
   b. 컴포넌트를 DOM에 마운트 하기위해 사용
4. componentDidMount
   a. 컴포넌트가 브라우저에 표시가 된 다음에 호출되는 메서드

Update(렌더링 후 state값이변경,  props가변경, 부모컴포넌트가 변경되었을 때)

1. getDerivedStateFromProps(mount랑 동일)
   1. Mount 과정에서도 동일하게 호출되었던 메서드.
   2. 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
2. shouldComponentUpdate
   1. 리렌더링 여부 판단(함수 호출 결과 : true / false)
      1. true인 경우 : 리렌더링 진행
      2. false인 경우 : 리렌더링 하지 않음
   2. 함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신한다.
3. render (mount랑 동일)
   1. 변경사항 반영이 다 되어 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
   2. 컴포넌트를 DOM에 마운트하기 위해 사용
4. getSnapshotBeforeUpdate
   1. 컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
   2. componentDidUpdate 함수에서 사용하기 위한 스냅샷 형태의 데이터
5. componentDidUpdate( getSnapshotBeforeUpdate 활용)
   1. 컴포넌트 업데이트 작업 완료 후 호출

Unmount

1. componentWillUnmount
   1. 컴포넌트가 사라지기 전 호출되는 메서드
   2. useEffect의 return과 동일