[React] Lifecycle

React Lifecycle

컴포넌트가 렌더링 준비하는 순간부터 페이지에서 사라질 때까지의 모든 순간

Lifecycle Method(생명주기 메서드)

컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들을 말한다.
클래스형 컴포넌트에서만 사용할 수 있다.

• 생성(Mount)
  counstructor → (getDerivedStateFromProps) → render → componentDidMount

• 수정(Update)
  (getDerivedStateFromProps → shouldComponentUpdate) → render → (getSnapshotBeforeUpdate) → componentDidUpdate

• 삭제(Unmount)
  componentWillUnmount

• 일반적인 방법
  
• 덜 일반적인 방법
  

1. counstructor()
   • 컴포넌트의 생성자 메서드
   • 컴포넌트가 생성되면 가장 먼저 실행
2. static getDerivedStateFromProps()
   • static이여야 함.
   • 특정 객체를 반환하게 되면 해당 객체 안에 있는 대용들이 컴포넌트의 state로 설정 / null 반환하면 아무 일도 발생하지 않음.
   • 컴포넌트의 props나 state가 변경되었을 시 메서드 호출
   • 컴포넌트가 수정되어 다시 랜더링 되기 전에 매번 실행
3. shouldComponentUpdate()
   • 컴포넌트가 리랜더링 여부를 결정하는 메서드
   • 주로 최적화 할 때 사용하는 메서드
4. render()
   • 컴포넌트를 랜더링하는 메서드
5. getSnapshotBeforeUpdate()
   • 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하는 componentDidUpdate 함수에서 받아와서 사용가능.
6. componentDidMount()
   • 컴포넌트의 첫번째 렌더링이 끝나면 호출되는 메서드
   • 메서드가 호출되는 시점에는 컴포넌트가 화면에 나타나있음
   • DOM을 사용해야 하는 외부 라이브러리 연동 → D3, masonry
   • DOM 속성을 읽거나 직접 변경하는 작업
   • 컴포넌트의 필요한 데이터 요청 → axios, fetch로 ajax 요청
7. componentDidUpdate()
   • 리랜더링을 끝난 다음 호출
   • 가상돔이 실제 돔으로 올라간 뒤 실행하는 메서드 (화면에 우리가 원하는 변화가 반영되고 난 뒤 호출되는 메서드)
8. componentWillUnmount()
   • 컴포넌트가 화면에서 사라지기 직전에 호출
   • DOM에 등록했던 이벤트 제거
   • 외부 라이브러리 사용기록 있음 → 해당 라이브러리에 dispose 기능 호출

출처

25. LifeCycle Method - 벨로퍼트와 함께하는 모던 리액트
React Lifecycle Methods diagram