리액트 기초-가상돔과 라이프사이클

가상돔

DOM은 html 단위 하나하나를 객체로 생각하는 모델로 트리구조이다.

가상돔은 메모리 상에서 돌아가는 가짜 DOM이다.기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워준다.

DOM을 새로 그리는 상황: 처음 페이지 진입했을 때, 데이터 변했을 때

라이프사이클

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지의 과정

[mount]
처음으로 컴포넌트를 불러오는 단계

[update]
사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트

• props가 바뀔 때 (부모가 자식에게 주는 것)
• state가 바뀔 때 (자기 자신의 상태)
• 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
• 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트 업데이트 가능)

[unmount]
페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계

라이프사이클 함수

라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

리액트는 공식적으로 함수형 컴포넌트 사용을 권장하고 있지만, 그래도 여전히 클래스형 컴포넌트를 어떻게 읽고 수정하는지는 숙지해야 한다. 또한 클래스 컴포넌트를 통해 라이프사이클을 공부할 수 있다.

라이프 사이클 함수가 어떤 순서로 움직이는 지 알아보자!

라이프 사이클 예제)

import React from "react";

// 클래스형 컴포넌트
// React.Component가 부모.
class LifecycleEx extends React.Component {

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

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

  changeCatName = () => {
    // 다음 강의에서 배울, state 업데이트 하는 방법입니다!
    // 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
      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>
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default LifecycleEx;

constructor()
생성자 함수. 컴포넌트가 생성되면 가장 먼저 호출

render()
컴포넌트의 모양을 정의

componentDidMount()
첫번째 렌더링을 마친 후에만 딱 한 번 실행된다. 컴포넌트가 리렌더링할 때는 실행되지 않음.
ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리

componentDidUpdate(prevProps, prevState, snapshot)
DidUpdate()는 리렌더링을 완료한 후 실행되는 함수
파라미터가 2개 있는데, prevProps와 prevState이다. 각각 업데이트 되기 전 props, state을 뜻함.

componentWillUnmount()
컴포넌트가 DOM에서 제거 될 때 실행하는 함수
삼항연산자를 사용해서 컴포넌트를 보여주거나, 없애는 걸 조건부 렌더링이라고 한다.