[리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드

• 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 ~ 페이지에서 사라질 때 끝난다.
• 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야할 때, 불필요한 업데이트를 방지해야할 때 라이프사이클 메서드를 사용한다.
• 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다. 함수형 컴포넌트는 Hooks를 사용하여 처리가능하다.

라이프사이클

1. 마운트: 페이지에 컴포넌트가 나타남
2. 업데이트: 컴포넌트 정보를 업데이트
   • props가 바뀔 때
   • state가 바뀔 때
   • 부모 컴포넌트가 리렌더링될 때
   • this.forceUpdate로 강제 렌더링 트리거할 때
3. 언마운트: 페이지에서 컴포넌트가 사라짐

라이프 사이클 메서드

render()

• 리액트 요소를 반환한다.
• 필수 메서드
• 주의! DOM 정보를 가져오거나 setState 사용 시에는 componentDidMount에서 처리해야 한다.

contructor

• 초기 state 설정 가능하다

getDerivedStateFromProps

• v16.3 이후에 만들어짐
• props로 받아 온 값을 state에 동기화시키는 용도

componentDidMount

• 컴포넌트를 다만들고 첫 렌더링을 다 마친 후 실행
• 다른 자바스크립트 라이브러리 또는 프레임워크 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업 처리

shouldComponentUpdate

• 리렌더링을 시작할지 여부 결정 (default: true)
• 리렌더링을 방지할 때 false로 사용
• 컴포넌트 업데이트 성능 개선 시 중요함

getSnapshotBeforeUpdate

• v16.3 이후에 만들어짐
• render에서 만들어진 결과물이 브라우저에 반영되기 직전에 호출됨
• 업데이트 직전 값을 참고할 일이 있을 때 활용 ex) 스크롤바 위치 유지

componentDidUpdate

• 리렌더링 완료 후 실행
• DOM 관련 처리

componentWillUnmount

• DOM에서 컴포넌트 제거
• componentDidMount에서 등록한 이벤트, 타이머, 직접 생성 DOM이 있다면 여기서 제거함

componentDidCatch

• v16에서 만들어짐
• 컴포넌트 렌더링 중 에러 발생 시 오류 UI 보여줌