라이프사이클 메소드는
모든 리액트 컴포넌트에 존재한다.
컴포넌트의 수명은 페이지에서 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질때
라이프사이클 메소드 종류
-Will : 어떤 작업을 작동하기 전에 실행
-Did: 어떤 작업을 작동한 후에 실행
마운트
-DOM이 생성되고 웹 브라우저상에 나타나는 것
업데이트
-props가 바뀔때
-state가 바뀔때
-부모 컴포넌트가 리렌더링될 때
-this.forceUpdate가 강제로 렌더링을 트리거할 때
언마운트
-마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거하는 것
redner()함수
-컴포넌트 모양새 정의
-필수 메소드
constructor() 메서드
- 컴포넌트의 생성자 메소드로 컴포넌트를 만들 때 처음으로 실행
- 초기 state를 정할 수 있음
getDerivedStateFromProps 메소드
- props로 받아 온 값을 state에 동기화시키는 용도
- 컴포넌트가 마운트될 때와 업데이트 될 때 호출
componentDidMount 메소드
- 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행
- 해당 메소드 안에서 다른 js의 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등의 비동기 작업 처리
shouldComponentUpdate 메소드
- props 또는state를 변경했을 때, 리렌더링을 시작할지 여부 지정하는 메소드
- 반드시 true값 or false값 반환
- 컴포넌트를 만들 때 해당 메소드 생성하지 않을 시 기본값은 true
- 프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리렌더링을 방지할 때는 false값
getSnapshotBeforeUpdate 메소드
- render에서 만들어진 결과물이 브라우저에서 실제로 반영되기 직전에 호출
- componentDidUpdate에서 세 번째 파라미터인 snapshot값으로 전달
componentDidUpdate 메소드
- 리렌더링을 완료한 후 실행
- 업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방
- prevProps 또는 prevProps를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근
componentWillUnmount 메소드
- 컴포넌트를 DOM에서 제거할 때 실행
componentDidCatch 메소드
- 컴포넌트 렌더링 도중에 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여줄 수 있음