[FE / REACT] React 라이프 사이클

React 라이프사이클

생성 ➡️ 업데이트 ➡️ 제거

• 클래스 컴포넌트는 라이프사이클 메소드를 활용함
• 함수형 컴포넌트는 Hook을 활용함

 

React 라이프사이클 메소드

1.  마운트 (생성) : 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 순서대로 호출
   1. constructor() :
      • 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드
      • this.prop, this.state에 접근할 수 있으며 리액트 요소 반환
      • setState를 사용할 수 없으며 DOM 에 접근해서는 안됨
   2. getDerivedStateFromProps()
      • props에 있는 값을 state에 동기화 시킬 때 사용하는 메소드
   3. render()
      • UI를 렌더링하는 메소드
   4. componentDidMount()
      • 컴포넌트가 웹 브라우저 상에 나타난 후 즉, 첫 렌더링을 마친 후 호출하는 멧드
      • 라이브러리나 프레임워크의 함수를 호출하거나 이벤트 등록, setTImeout과 같이 비동기 작업 처리
2. 업데이트 : props나 state 가 변경되면 렌더가 진행되며 순서대로 호출
   • getDerivedStateFromProps()
     • 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출
     • props의 변화에 따라 state 값에도 변화를 주고 싶은 경우에 사용
   • shouldComponetUpdate()
     • props 또는 state를 변경했을 때 리렌더링을 시작할지 여부를 지정하는 메소드
   • render()
     • 컴포넌트 리렌더링
   • getSnapshotBeforeUpdate()
     • 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
   • componentDidUpdate()
     • 컴포넌트 업데이트 작업이 끝난 후 호출하는 메소드
3. 언마운트 (제거) : 컴포넌트를 DOM에 제거하는 과정
   • componentWillUnmount()
     • 컴포넌트를 제거할 때 실행