REACT 컴포넌트 생명 주기 Component Life Cycle

❗  Component Life Cycle을 공부하게 된 계기

 

리액트를 파다보니 마운트, 언마운트, 업데이트 등 한번에 와닿지 않는 개념들이 많더라.

그래서 정리하기로 결심했다 ! 

 

📌  리액트의 Component Life Cycle 

 

 

리액트는 UI 중심의 컴포넌트 기반 개발 언어이다. 컴포넌트로 시작해 컴포넌트로 끝낸다고 해도 과언이 아니다.

때문에 리액트에는 컴포넌트 관리 방법과 과정을 명시한 "Component Life Cycle"이 존재한다.

컴포넌트 렌더링 직전 or 직후 또는 컴포넌트 업데이트 전 or 후에 처리해야하는 작업들을 순서에 맞춰 실행시킬 수 있다.

---

📍  Rendering

 

// HTML
// <div id="root"></div>
// React DOM은 이 안에 들어가는 모든 엘리먼트들을 "관리"한다.
// <div id="root"></div>는 root DOM Node라고 부른다.

const element = <h1>Hello world</h1>;

// React 엘리먼트를 root DOM Node에 렌더링하고싶다면,
// ReactDOM.render()에 둘 다 인자로 전달하면 된다.

ReactDOM.render(element, document.getElementById('root'));

 

📍  Re-rendering

 

React 엘리먼트는 불변 객체이다.

엘리먼트를 생성한 이후에는 해당 엘리먼트의 속성은 변경할 수 없다. 

엘리먼트를 변경해주려면, 렌더링을 다시해주는 수밖에 없다.  -->  update는 re-rendering을 발생시킨다. 

re-rendering 은 언제 일어나는가 ?
✔  해당 컴포넌트의 state가 변경되었을 때
✔  해당 컴포넌트가 전달받은 props가 변경되었을 때
✔  부모 컴포넌트가 re-rendering될 때
✔  forceUpdate( )가 실행되었을 때 

 

변경된 엘리먼트만 re-rendering 하는 모습

 

 

React DOM은 이전의 엘리먼트와 "해당 엘리먼트 && 그 자식 엘리먼트"를 비교하여 필요한 부분만 DOM을 업데이트한다.

-->  Virtual DOM 개념

---

◾  mount

mount 메서드들
✔  constructor( )
✔  static getDerivedStateFromProps( )
✔  render( )
✔  componentDidMount( ) 

 

컴포넌트 인스턴스가 생성되어 DOM tree에 삽입될 때 ( mount 될 때 ) 위의 순서대로 호출된다.

 

📎 constructor( )

constructor( )는 해당 컴포넌트가 ⭐ 마운트되기 전에 ⭐ 호출된다.

생성자는 this.state에 객체를 할당해서 지역 state를 초기화하거나, 인스턴스에 이벤트 처리 메서드를 바인딩하기 위해 사용된다.

해당 React 컴포넌트에 메서드를 바인딩하거나 state를 초기화하는 등의 작업이 없다면, 생성자는 구현하지 않아도 된다.

 

📎 render( )

render( ) 는 해당 컴포넌트를 ⭐ 마운트시킨다 ⭐ 필수 메서드야 !!

렌더 함수는 순수 함수로서, 호출될 때마다 동일한 결과를 반환한다. 즉, 브라우저와 직접적으로 상호작용을 하진 않는다.

 

📎 componentDidMount( )

componentDidMount( )는 컴포넌트가 ⭐ 마운트된 직후에 ⭐ ( === DOM tree에 삽입된 이후에 ) 호출된다.

DOM 노드가 있어야하는 초기화 작업은 이 메서드에서 하면된다.

ex. 외부에서 데이터를 불러와야 할 때, 네트워크 요청을 보내기 적절 **!**

ex. 모달창이나 툴팁창과 같이 렌더링에 앞서 DOM 노드의 크기나 위치를 먼저 측정해야하는 경우 적절 **!**

 

 

◾  update

update 메서드들
✔  static getDerivedStateFromProps( )
✔  shouldComponentUpdate( )
✔  render( )
✔  getSnapshotBeforeUpdate( )
✔  componentDidUpdate( )

 

컴포넌트가 다시 렌더링될 때 ( update 될 때 ) 위의 순서대로 호출된다.

 

📎 componentDidUpdate( )

componentDidUpdate( ) 는 ⭐ 업데이트가 일어난 직후에 ⭐ 호출된다. 마운트될때는 호출되지 않는다 !!

컴포넌트가 업데이트되었을 때 DOM을 조작하기 위해 이 메서드를 활용한다.

ex. 이전의 props(or state)와 현재의 props(or state)를 비교하여 네트워크 요청을 보낼 때 적절 **!**

 

 

◾  unmount 

unmount 메서드
✔  componentWillUnmount( )

 

📎 componentWillUnmount( )

componentWillUnmount( ) 는 컴포넌트가 ⭐ unmount되어 사라지기 직전에 ⭐ 호출된다.

더 이상 필요하지 않은 DOM 노드를 지울 때 이 메서드를 활용한다.

한 번 마운트가 해제된 컴포넌트 인스턴스는 절대로 다시 마운트되지 않는다.

 

 

컴포넌트가 DOM 상에서 제거될 때 ( unmount 될 때 ) 호출된다.

 

◾  error handling

error handling 메서드들
✔  static getDerivedStateFromError( )
✔  componentDidCatch( )

 

자식 컴포넌트를 렌더링하는 과정에서 오류가 발생했거나,

자식 컴포넌트가 Life Cycle 메서드를 호출하는 과정에서 오류가 발생하거나,

자식 컴포넌트가 생성자 메서드를 호출하는 과정에서 오류가 발생했을 때 호출된다.