React - LifeCycle

---

Class Component

APP이 생성될 때

Constructor

constructor는 App이 시작될 때 가장 먼저 호출되는 함수이다.

앱이 실행되지마자 해줘야하는 작업들은 Constructor에 넣는다.
ex. state를 만든다.

getDeriveStateFromProps

state와 props를 동기화 시켜준다.

render

UI를 그려준다.

componentDidMount

UI가 모두 render되었을 때를 알려준다.
ex. Render가 끝난 후에 진행될 API Call 작업들을 주로 한다.

[AppClass.js]

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    console.log('constructor');
  }
  componentDidMount() {
    console.log('componentDidMount');
  }
  render() {
    console.log('render');
    return <div></div>;
  }
}

업데이트 할 때

1. props가 전달이 되거나
2. state가 업데이트 되거나
3. 업데이트가 강요되는 상황일 때

getDeriveStateFromProps

state와 props를 동기화 시켜준다.

shouldComponentUpdate

컴포넌트의 render를 결정하는 함수

render

componentDidUpdate

state의 업데이트가 모두 되었는지를 알려주는 함수

ex. 최신 업데이트된 값을 가지고 무엇을 해야할 때

[AppClass.js]
state값이 변경되면 화면이 재렌더링 된다.

이것을 이용하여 버튼 클릭 시 state 값을 변경 시켜 해당 함수(componentDidUpdate)를 실행시킬 수 있다.

import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    console.log('constructor');
  }
  buttonClick = () => {
    this.setState({
      counter: this.state.counter + 1,
    });
  };
  componentDidMount() {
    console.log('componentDidMount');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.buttonClick}>클릭!</button>
      </div>
    );
  }
}

제거될 때

componentWillUnmount

컴포넌트가 화면상에서 사라질 때
해당 컴포넌트가 사라지면서 해당 함수가 불리게된다.

[AppClass.js]
버튼을 3번 클릭 시 Box 컴포넌트가 사라지는 소스코드

import React, { Component } from 'react';
import Box from './Box';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    console.log('constructor');
  }
  buttonClick = () => {
    this.setState({
      counter: this.state.counter + 1,
    });
  };
  componentDidMount() {
    console.log('componentDidMount');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }
  render() {
    console.log('render');
    return (
      <div>
        <button onClick={this.buttonClick}>클릭!</button>
        {this.state.counter < 3 && <Box />}
      </div>
    );
  }
}

[Box.js]

import React, { Component } from 'react';

export default class Box extends Component {
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
  render() {
    return <div>Box</div>;
  }
}

Function Component

---

함수형 컴포넌트에서는 useEffect 훅을 가지고 "componentDidMount", "componentDidUpdate" 처럼 사용할 수 있다..

처럼이라는 부분이 중요하다.
완전히 똑같지 않다.

[AppFunction.js]

import React from 'react';
import { useState, useEffect } from 'react';

const AppFunction = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(0);
  useEffect(() => {
    console.log('useEffect === componentDidMount');
  }, []);
  const clickButton = () => {
    setCount(count + 1);
    setValue(count + 2);
  };

  useEffect(() => {
    console.log('useEffect === componentDidUpdate');
    console.log(`count : ${count} value : ${value}`);
  }, [count, value]); // 2번째 인자로 array를 넣어두면 count, value가 렌더되면 알려준다.
  // count, value 중 하나라도 값이 변하면 해당 useEffect()를 실행시켜준다.
  // count, value가 두개가 바껴도 한번만 실행된다.

  console.log('render');
  return (
    <div>
      <button onClick={clickButton}> 클릭</button>
    </div>
  );
};

export default AppFunction;

render 후 useEffect 훅을 사용한다.
useEffet(()=>{},[]) 2가지 파라미터를 가진다.
2번째 파라미터인 배열에 변수가 들어올 경우 해당 변수가 변하면 componentDidUpdate가 실행된다.

전체 소스코드

Github 이동 👉 FdongFdong