React prac 내장함수 라이프 사이클

1. constructor() :

생성자 함수라고도 부릅니다. 컴포넌트가 생성되면 가장 처음 호출되는 친구죠!

컨스트럭쳐 안에서 props, state 생성? 해줌

 

2. render():

리턴 값으로 ui요소를 반환함 우리가 만들어 둔 컴포넌트들을 출력? 해주는 친구

state, props 데이터를 꺼내서 보여줌 

 

3. componentDidMount()

컴포넌트 들이 화면에 나타나는 것이 완료되면 그 순간 실행됨

첫번째 렌더링 후 딱 한번 실행 // 재 렌더시 작동 x

ajax 호출, 함수호출, 이벤트 등록

 

4. componentDidUpdate()

컴포넌트 디드마운트가 첫 렌더에만 출력된다고 하는데.

이 친구는 리렌더링을 완료한 후에 실행된다. 

이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState입니다.

지금 내가 가지고 있는 state, props외 에도 보여 줄 수 있다.

데이터 비교가 필요한 순간 여기에 업데이트하면 좋다!

 

5. componentWillUnmount()

컴포넌트가 제거될 때 실행된다.

 

 

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>
    );
  }
}

export default LifecycleEx;