[React.js] 컴포넌트 생명주기

:::참고::: ko.reactjs.org/docs/react-component.html#constructor

 

리액트는 수많은 컴포넌트로 구성되어있고, 각 컴포넌트는 생명주기(life cycle)이라는 개념을 갖는다.

생명주기란 쉽게 말해서, 컴포넌트가 프로그램에서 어떻게 생성되고, 업데이트 되고, 삭제 되는지의 3단계를 의미하는 것이다.

생명주기 도표

 

이 생명주기 3단계를 용어로서 표현하자면 다음과 같다.

1. 마운트(Mount): 컴포넌트의 생성

2. 업데이트(Update): 컴포넌트 업데이트

3. 언마운트(Unmount): 컴포넌트의 제거

---

1. 마운트(Mount)

마운트는 컴포넌트의 새로운 인스턴스가 생성되어 DOM 상에 삽입될 때에 실행되는 과정이다. 

일련의 함수들이 순차적으로 실행되며, 종류는 다음과 같다.

1. constructor(): 생성자. 컴포넌트의 생성과 함께 가장 먼저 실행된다. 메서드를 바인딩하거나 state를 초기화할때 사용한다. 딱히 그럴 필요가 없다면 구현하지 않아도 된다.

2. static getDerivedStateFromProps(): 쓸 일이 거의 없다고 한다. 패스

3. render(): 위 과정(주로 constructor만)을 통해 설정된 초기값을 이용해 렌더링을 진행한다.

4. componentDidMount(): 렌더링이 완료되어 마운트가 끝나는 것을 알려주는 함수이다.

 

2. 업데이트(Update)

말 그대로 업데이트이다. props또는 state가 변경됨에 따라 컴포넌트가 가지는 값 또는 모든 것들이 갱신되면서 발생하는 과정이다. 

1. static getDerivedStateFromProps(): 패스

2. shouldComponentUpdate(): 패스

3. render(): setState등을 이용해 변경된 state값 등을 다시 렌더링하는 과정이다. 변경사항을 저장하여 앱에 표현해주는 거라고 보면 될 것 같다.

4. getSnapshotBeforeUpdate(): 패스

5. componentDidUpdate(): 재 렌더링이 완료 되면서 업데이트가 종료됨을 알려주는 함수이다.

 

3.언마운트(Unmount)

해당 컴포넌트가 DOM 상에서 제거될 때에 호출된다. 페이지 또는 컴포넌트가 교체될 때가 그런 경우에 해당된다. 오직 하나의 함수만을 갖는다.

1. componentWillUnmount(): 컴포넌트가 이제 언마운트 될 것임을 알려준다.