컴포넌트 라이프사이클

가상돔

• DOM이란? https://duckgugong.tistory.com/181
• DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 것을 찾고, 모두 수정한다면 필요없는 연산이 너무 많이 일어나기 때문에 등장한 것이 가상돔이다.
• 가상돔은 메모리 상에서 돌아가는 가짜 DOM이다.

---

가상돔의 동작 방식

• 기존 DOM과 어떤 행동 후 새로 그려진 DOM(가상 돔)을 비교해서 바뀐 부분말 갈아끼워준다.
• 가상돔은 DOM보다 무조건 빠르다고 할 수 없다. DOM은 사이트 구조에 따라 가상돔을 쓰는 것이 훨씬 성능이 좋을 수 있고, 느릴 수도 있다.

---

컴포넌트 라이프 사이클

• 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다.

• 아래는 덜 일반적인 라이프 사이클이다.

• 위의 그림처럼 컴포넌트는 생성 → 수정(업데이트) → 제거의 과정을 거친다.
• 생성은 처음으로 컴포넌트를 불러오는 단계이다.
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다. 아래의 경우가 업데이트될 때의 경우이다. 
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(다시 렌더링할 경우)
  • 강제로 업데이트 했을 경우!(forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계이다.

 

---

라이프 사이클 함수

• 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.
• 라이프 사이클을 아는 것은 중요하지만 함수형 컴포넌트를 더 많이 사용한다.
• 리액트 16.8버전부터 등장한 React Hooks으로 함수형 컴포넌트에서도 라이프 사이클 함수를 대체할 수 있다!

constructor()

• 생성자 함수라고도 부른다. 컴포넌트가 생성되면 가장 처음 호출됨.

render()

• 컴포넌트의 모양을 정의하는 함수. 화면에 컴포넌트를 그리는 함수라고 보자!
• state의 값이 바뀌면 state를 가지고 있는 컴포넌트의 render()함수가 다시 호출된다. render()함수가 다시 호출됨에 따라서 그 렌더 함수 하위에 있는 컴포넌트들도 각자의 렌더함수가 실행되어 화면이 다시 그려진다!
• state나 props값을 render()함수 안에서 참조할 수 있다.

componentDidMount()

• 컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현한다. didMount()라는 의미는 컴포넌트가 마운트 되었음을 의미한다.
• 이 함수는 첫번째 렌더링을 마친 후에 딱 한번만 실행된다. 컴포넌트가 리렌더링할 때는 실행되지 않는다!
• 보통 이 안에 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리한다.
• 이미 가상돔이 실제돔으로 올라간 후이므로 DOM 관련 처리를 해도 된다!

componentDidUpdate(prevProps, prevState, snapshot)

• componentDidMount()가 첫 렌더링 후에 호출 되는 함수라면, componentDidUpdate()는 리렌더링을 완료한 후 실행되는 함수이다.
• 이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState이다. 각각 업데이트 되기 전 props, state이다.
• 이전 데이터와 비교할 일이 있다면 가져다 쓰도록 하자. 
• componentDidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도된다.

componentWillUnmount()

• 컴포넌트가 DOM에서 제거 될 때 실행하는 함수.
• 만약 우리가 스크롤 위치를 추적 중이거나, 어떤 이벤트 리스너를 등록했다면 여기에서 꼭꼭 해제를 해줘야 한다. 컴포넌트 없이 이벤트만 남겨둘 순 없기 때문!

shouldComponentUpdate(newProps, newState)

• 자신과 상관없는 일이 진행되어도 렌더링이 발생하는 불합리한 일이다.
• 예를 들어, 부모 컴포넌트의 state 값이 바뀌면 자식 컴포넌트들의 렌더함수가 모두 호출 되지만, 자식 컴포넌트에서 shouldComponent()의 리턴 값을 false로 주면 render()함수가 호출되지 않는다!
• 이 함수에 중요한 파라미터가 두개 있는데, newProps와 newState이다. 각각 업데이트된 props와 state이다.
• 자신의 state와 props가 바뀌지 않아서 리렌더링 될 필요가 없을 경우 사용하자!

shouldComponentUpdate(newProps, newState){
	console.log(
    	newProps.data,
        this.props.data
    );
	return false;
}

---

라이프 사이클 예제

• 아래와 같은 코드를 붙여넣고 콘솔 창에 어떻게 찍히는지 확인해보자.

LifeCycle.js

import React from "react";

// 클래스형 컴포넌트
class LifeCycle extends React.Component {

// 생성자 함수
  constructor(props) {
    super(props);
    
    this.state = {
      cat_name: '나비',
    };

    console.log('in constructor!');
  }

  changeCatName = () => {
    // 클래스형 컴포넌트에서 state 업데이트 하는 방법!
      this.setState({cat_name: '바둑이'});

      console.log('고양이 이름을 바꾼다!');
  }

  componentDidMount(){
    console.log('in componentDidMount!');
  }

  componentDidUpdate(prevProps, prevState){
      console.log(prevProps, prevState);
      console.log('in componentDidUpdate!');
  }

  componentWillUnmount(){
      console.log('in componentWillUnmount!');
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어준다!
  render() {

    console.log('in render!');

    return (
      <div>
          {/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있다. */}
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        {/* 버튼을 클릭하면 이벤트가 실행되어서 state의 값이 변경되어 render()가 다시 호출됨! */}
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifeCycle;

App.js

import LifeCycle from "./LifeCycle";
import './App.css'
import React from "react";

function App() {
  return (
    <div className="App">
      <LifeCycle></LifeCycle>
    </div>
  );
}

export default App;

• 처음에 페이지를 열면 아래와 같이 나타난다.

• 버튼을 누르면 render()함수가 다시 호출됨에 따라 componentDidUpdate()가 다시 호출되는 것을 알 수 있다