🐱 #8 React.js - Life cycle

🧶Life Cycle

리액트는 3개의 Life Cycle을 가지고 있는데 그 3가지는 Mounting, Updating, Unmounting 있다.

Mounting은 컴포넌트가 시작될 때
Updating은 state가 업데이트 되고 UI가 없데이트 될 때
Unmounting은 컴포넌트가 종료될 때

1. Constructor(Class Component)

Class Component에서 처음으로 constructor에서 state를 생성한다. 그 이유는 Life Cycle에서 첫 번째로 실행되는 Life Cycle 함수이다. 그래서 앱을 시작하자마자 실행하고 싶다면 constructor안에 넣으면 된다.

import React, { Component } from 'react'
import './App.css';
import BoxClass from './component/BoxClass';

export default class Appclass extends Component {

    constructor(props){ // constructor 리액트에서 제공하는 lifecycle 함수 중 하나 (생성자) : 컴포넌트가 실행되자 마자 함수실행
        super(props)
        this.state={ // state를 선언한다.
            counter2 : 0, //원하는 state를 선언해 주는 것이다.
            num:1,
            value:0
        };
    }
}

2. getDerivedStateFromProps

getDerivedStateFromProps는 간단하게 설명하면 state와 props를 동기화시켜주는 함수이다.
props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출된다.

function ScrollView({row}) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  const [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // 마지막 렌더링 이후 행이 변경되었습니다. isScrollingDown을 업데이트합니다.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

3. render

render는 UI를 그려주는 함수이다.
이는 가장 기초적인 메서드이기도하고 가장 중요한 메서드이기도 하다. 컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드이기도 하다. 함수형 컴포넌트에서는 render를 안쓰고 컴포넌트를 렌더링할 수 있다.

render() {
    console.log("render");
    return (
      <div>
        <div>state: {this.state.counter2}</div> {/* class 컴포넌트를 부를때는 counter2만 선언하는 것이아니라. this.state 를 매번 붙여줘야 한다.*/}
        <button onClick={this.increase}>클릭!</button>
        <BoxClass num={this.state.value}/>
      </div>
    )
  }

4.componentDidMount

UI가 셋팅이 완벽하게 됐을 때 알려준다.
주로 API 호출 작업들을 한다. 사용자가 앱을 실행했을 때 UI가 먼저 그려진 상태로 API가 호출 되어야 한다. UI가 그려지지 않은 상태로 API를 호출 했을 때 표시가 안된다. 그래서 render 다음 단계인 componentDidMount에 API를 호출 해주는 것이다.

5. shouldComponentUpdate

간단하게 말하면 component가 render를 할지 결정하는 함수이다.

6. componentDidUpdate

Updating 상황일 때 작동된다. state가 업데이트 되거나 setState가 발생 될 때 rnder가 발생이 된다. 그리고 render가 발생되면 componentDidUpdate가 호출된다. 왜 호출을 해주냐면 우리가 setState를 해도 비동기식으로 기다렸다가 나중에 호출된다. 그래서 state가 update가 되었는지 알려주는 것이다.

7. componentWillUnmount

이 메서드는 컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다. 함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현할 수 있다.

하지만 위에 있는 것들은 Class Component만 사용할 수 있다.

그렇다면 Function Component에는 어떻게 사용하는 알아보자. 그것은 바로 useEfffect()이다.

8. useEffect

useEffect는 기본적으로 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 모두 한다.
때문에 위 코드는 1) 컴포넌트가 마운트 된 후, 2) 컴포넌트가 업데이트되고 난 후 3) 컴포넌트가 언마운트 되기 전 모두 실행된다.

  useEffect(()=>{
    console.log("useEffect2 Firee", counter);
  },[counter]) //어레이의 값을 넣으면 컴퓨터가 주시한다. 즉 값이 바뀌면 `componentDidUpdate`가 된다.
//어레이의 내용이 하나라도 바뀌면 render가 된다.