[React] 리액트 생명 주기 React Life Cycle

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

✅ 리액트에는 라이프 사이클 Life Cycle이라는 것이 있다.
리액트가 컴포넌트 기반의 라이브러리이기 때문에 각 컴포넌트에 수명 주기가 존재하고, 컴포넌트 프로세스를 통제하기 위해서는 라이프 사이클에 대해 파악해야만 한다.

 

리액트 컴포넌트는 크게 생성 (마운팅) > 업데이트 (업데이팅) > 제거 (언마운팅) 의 순서로 생명 주기를 갖는다.
Class로 리액트 컴포넌트를 구성할 때는 라이프 사이클 메서드를, funtional 리액트 컴포넌트를 구성할 때는 Hook을 이용해 컴포넌트를 관리한다.

 

⏹️ 리액트 생명주기 메소드

1. 마운트

컴포넌트 인스턴스 생성, DOM에 삽입될 때 호출

- constructor : 컴포넌트 생성자 메서드, 컴포넌트 생성 시 가장 먼저 실행됨. state, props에 접근해 값 할당
- static getDerivedStateFromProps : props로 받아온 값을 state에 설정, render() 메소드 호출 직전에 호출
- render : 컴포넌트 렌더링
- componentDidMount : 컴포넌트 마운트, 첫번째 렌더링 직후 호출(화면 구현 O). DOM에 접근 가능. ajax 요청이나 DOM 속성 읽기/변경 시 사용

 

2. 업데이트

props, state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, 강제로 렌더링 트리거 할 때 호출

- static getDerivedStateFromProps : 마운트 시와 동일, 업데이트 시에도 실행
- shouldComponentUpdate : 컴포넌트를 리렌더링할지 결정하는 메소드. props, state 갱신 후 렌더링 발생 직전 호출. (return false 시 render가 취소되어 성능 최적화를 위해 사용)
- render  : 컴포넌트 렌더링
- getSnapshotBeforeUpdate: 렌더링 결과가 DOM에 반영되기 전 호출, DOM 상태 변경 이전 값을 반환 ( componentDidUpdate에서 이전 값 인자로 받아서 사용 가능)
- componentDidUpdate : 갱신 직후 호출, 최초 렌더링에서는 호출되지 않음

 

3. 언마운트

컴포넌트가 제거될 때 호출

- componentWillUnmount : 컴포넌트 사라지기 직전 호출, DOM에 등록되어있던 이벤트 제거 용도로 사용