React 라이프사이클 메서드

리액트 라이프 사이클 메서드

Will 접두사 : 어떤 작업 전에 실행되는 메소드
Did 접두사 : 어떤 작업 후 실행되는 메소드

1.1 라이프사이클 종류

• 마운트 페이지에 컴포넌트 등장
• 업데이트 컴포넌트 업데이트
• 언마운트 컴포넌트 소멸

1.1.1 마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것

메서드 호출 단계
1. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자
2. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용
3. render : 화면에 뿌림
4. componentDidMount : 컴포넌트가 다 뿌려진 후 호출

1.1.2 업데이트

컴포넌트 정보를 업데이트

• 업데이트 발생 요건
  • 부모 컴포넌트에서 전달하는 props가 바뀔 때
  • 자신이 들고 있는 state가 setState로 업데이트 될 때
  • 부모 컴포넌트 리렌더링
  • this.forceUpdate로 강제로 렌더링을 트리거할 때

메서드 호출 단계
1. getDerivedStateFromProps
2. shouldComponentUpdate : 컴포넌트가 리렌더링 할지 안 할지 결정
3. render
4. getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출
5. componentDidUpdate : 업데이트 작업이 끝난 후 호출

1.1.3 언마운트

컴포넌트를 DOM에서 제거
1. componentWillUnmount : 컴포넌트가 사라지기 전에 호출