TIL 21_React의 생명 주기(Life-cycle)

리액트 class강의를 듣으면서 생명 주기? Life-cycle? 갑자기 웬 생명 주기?

리액트 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생하게 된다!

컴포넌트가 mount 시작 되면

1. constructor가 가장 먼저 실행
2. getDerivedStateFromProps에서 props와 state를 비교
3. render component
4. update DOM
5. componentDidMount가 실행

Mount란?
컴포넌트가 처음 실행될 때 그것을 Mount라고 표현한다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장한다. 그 후에 componentWillMount 메소드를 호출한다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됩니다.

컴포넌트가 update 될 때 (new props or setState)

1. getDerivedStateFromProps에서 props와 state 비교
2. shouldComponentUpdate 실행 - new props, state를 확인하고 rerender 할 것인지 결정
3. rerender
4. update DOM
5. componentDidUpdate 실행

컴포넌트가 unmount 될 때

1. componentWillUnmount 실행

---

컴포넌트 생성

컴포넌트가 브라우저에 나타나기 전과 후에 호출되는 API들이 있다.

• constructor

constructor(props) {
  super(props);
}

constructor는 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.

• componentWillMount

componentWillMount() {

}

이 API는 컴포넌트가 사용자의 화면에 나타나기 직전에 호출되는 API 이다.

하지만 이 componentWillMount 에 대해선 별로 신경쓰지 않아도 된다는 점! 원래는 주로 브라우저가 아닌 환경에서도 호출하는 용도로 사용했었는데, 이 API 가 더 이상 필요하지 않게 되었고 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용해야 한다.
기존에 이 API 에서 하던 것들은 위에 있는 constructor 와 아래에서 다뤄볼 componentDidMount 에서 충분히 처리 할 수 있다.

• componentDidMount

componentDidMount() {

}

이 API는 사용자의 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 여기선 주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행한다.

출처 📚

---

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

https://velopert.com/3631

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955