라이프 사이클이란??

먼저 DOM에 대해 알아보자

 

DOM을 아시나요? DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다. DFS BFS 생각이 나네요...

 

DOM 트리 중 하나가 수정될 때 모든 돔을 뒤지는 게 비효율 적이어서 생긴 게 바로 가상 돔이다

 

가상 돔의 동작 방식은 기존 DOM과 어떤 행동 후 새로 그린 DOM을 비교해서 

바뀐 부분만 교체 >> 업데이트 처리가 매우 간결하다

 

DOM을 그리거나 갈아 끼우는 것은 렌더링, 리렌더링 이라고 한다

 

라이프 사이클이란?

한마디로 컴포넌트의 인생? 생명주기라고 할 수 있다.

 

 

함수형 컴포넌트와 다르게 클래스 컴포넌트엔

 

constructor와 render가 있다 이것이 라이프 사이클 이다.

 

import React from "react";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
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>
    );
  }
}

 

• 1. constructor()
  생성자 함수라고도 부릅니다. 컴포넌트가 생성되면 가장 처음 호출되는 친구죠!
• 1. render()
  컴포넌트의 모양을 정의하는 친구입니다! 여기에서도 state, props에 접근해서 데이터를 보여줄 수 있어요.
• 리액트 요소를 return에 넣어 반환해줬던 거 기억하시죠? render() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 가장 좋습니다. 즉, state나, props를 건드려 데이터를 수정하려고 하면 안됩니다!
• 1. componentDidMount()
  컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현합니다. didMount()는 마운트가 완료 되었다는 소리겠죠? 이 함수는 첫번째 렌더링을 마친 후에만 딱 한 번 실행됩니다. 컴포넌트가 리렌더링할 때는 실행되지 않아요. 보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리합니다. 또, 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 됩니다!
• 1. componentDidUpdate(prevProps, prevState, snapshot)
  DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수입니다.
• 이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState입니다. 각각 업데이트 되기 전 props, state예요. 이전 데이터와 비교할 일이 있다면 가져다 쓰도록 합시다. DidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 됩니다!
• 1. componentWillUnmount()
  컴포넌트가 DOM에서 제거 될 때 실행하는 함수입니다. 만약 우리가 스크롤 위치를 추적 중이거나, 어떤 이벤트 리스너를 등록했다면 여기에서 꼭꼭 해제를 해줘야 합니다. 컴포넌트 없이 이벤트만 남겨둘 순 없잖아요!