[React] 💎 Class 문법에서의 LifeCycle hook 사용법.

목차

React의 LifeCycle은 무엇인가

React로 웹개발을 하다 보면 컴포넌트에 Lifecycle이라는 개념이 있다. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount), 재렌더링이 될 수도 있고 (전문용어로 update), 삭제가 될 수도 있습니다. (전문용어로 unmount)

 

컴포넌트의 Lifecycle을 알아야 하는 이유는, 이걸 알아야 "컴포넌트의 인생 중간중간에 실행할 코드"를 삽입할 수 있기 때문이다. 컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트될 때 특정 코드를 실행할 수 있는 것이다.

---

Class 문법에서의 LifeCycle hook 사용법

주로 사용되는 LifeCycle hook

TypeScript

class App extends React.Component {
  componentDidMount(){
    //App 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //App 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //App 컴포넌트가 삭제되기전에 실행할 코드
  }
}

componentDidMount

• 컴포넌트가 마운트 된 후 호출됩니다.
• 브라우저에서 한 번만 실행됩니다.
• axios, fetch 등을 사용하여 외부 라이브러리 연동 및 네트워크 요청을 보내는데 적절합니다.

componentDidUpdate

• 컴포넌트가 갱신된 후 호출됩니다.
• 즉, 컴포넌트의 state가 변경되었을 경우 실행됩니다.
• 갱신이 일어난 후 호출되므로 최초 렌더링에서는 호출되지 않습니다. 

componentWillUnmount

• 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
• 컴포넌트가 마운트 해제되면 다시 렌더링 되지 않으므로 state를 변경하는 setState()를 사용해서는 안된다.

---

그 외의 LifeCycle hook

위의 3개의 생명 주기 이외에도 더 이상 사용하면 안 되는 UNSAFE_componentWillUpdate, UNSafe_componentWillReceiveProps 그리고 잘 사용하지 않는 shouldComponentUpdate, getDerviedStateFromProps 등등 여러 가지의 생명주기 메소드가 존재한다.

 

하지만, React Hook은 자주 사용되는 그리고 꼭 필요한 생명주기 메소드인 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API인 useEffect로 통합하였다.

 

그러면 useEffect에서 클래스 컴포넌트의 생명 주기 메소드 componetDidMount, componentDidUpdate, componentWillUnmount를 구현하고 useEffect와 비교해 보는 코드를 작성하겠습니다.

---

React Hook에서 componentDidMount

밑의 코드는 클래스 컴포넌트에서 componentDidMount를 구현한 코드이다.

TypeScript

import React from "react";

class App extends React.Component {
    componentDidMount() {
        console.log('App componentDidMount()');
    }
    
    render() {
        return <h1>App Component Life Cycle</h1>;
    }
}

밑의 코드는 함수형 컴포넌트에서 useEffect를 사용하여  componentDidMount를 사용한 코드입니다.

TypeScript

import React, { useEffect } from "react";

const App = () => {
    useEffect(() => {
        console.log('App componentDidMount()');
    }, []);
    
    return <h1>App Component Life Cycle</h1>;
}

useEffect에 두 번째 매개변수로 빈 배열( [] )을 전달하여 컴포넌트가 마운트된 직후 한 번만 실행된다.

---

React Hook에서 componentDidUpdate

밑의 코드는 클래스 컴포넌트에서 componentDidUpdate를 사용한 코드이다.

TypeScript

import React from "react";

class App extends React.Component {
    componentDidUpdate() {
        console.log('App componentDidUpdate()');
    }
    
    render() {
        return <h1>App Component Life Cycle</h1>;
    }
}

밑의 코드는 함수형 컴포넌트에서 useEffect를 사용하여 componentDidUpdate를 사용한 코드입니다.

TypeScript

import React, { useEffect } from "react";

const App = () => {
    useEffect(() => {
        return() => {
            console.log('App componentWillUnmount()');
        }
    });
    
    return <h1>App Component Life Cycle</h1>;
}

componentDidMount와 유사하지만 useEffect에 두 번째 매개변수가 존재하지 않다는 차이점이 있다.

---

React Hook에서 componentWillUnmount

밑의 코드는 클래스 컴포넌트에서 componentWillUnmount를 사용한 코드이다.

TypeScript

import React from "react";

class App extends React.Component {
    componentWillUnmount() {
        console.log('App componentWillUnmount()');
    }
    
    render() {
        return <h1>App Component Life Cycle</h1>;
    }
}

밑의 코드는 함수형 컴포넌트에서 useEffect를 사용하여 componentWillUnmount를 사용한 코드이다.

TypeScript

import React, { useEffect } from "react";

const App = () => {
    useEffect(() => {
        return() => {
            console.log('App componentWillUnmount()');
        }
    }, []);
    
    return <h1>App Component Life Cycle</h1>;
}

이 또한 componentDidMount와 유사하지만 useEffect 내부에 return문이 존재한다. useEffect 내부의 return문은 해당 컴포넌트가 DOM에서 제거될 때만 호출된다.

---

참고 문헌

• 1[React]클래스 컴포넌트 생명주기 Hook으로 변경
• 225. LifeCycle Method
• 320220203 클래스형/함수형 컴포넌트, State&Props, Lifecycle Method, useEffect, this