[React] - Lifecycle과 useEffect

리액트의 컴포넌트는 Lifecycle(생애 주기)를 가지는데, Lifecycle은 쉽게 말해 컴포넌트가 생성, 업데이트, 소멸되는 일련의 과정을 뜻한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때에는 이벤트가 발생한다.

컴포넌트의 생애 주기 3단계는 다음과 같다.

• mount : 컴포넌트가 처음 실행될 때
• update : props나 state가 업데이트될 때 (재랜더링)
• unmount : 컴포넌트가 제거될 때 (더는 사용하지 않을 때)

• useEffect() : mount, update 시 코드를 실행해주는 훅이다. 첫 번째 파라미터에는 함수, 두 번째 파라미터에는 dependency(의존값)이 들어간다.
• useEffect()는 반환값을 반환할 수도 있는데, useEffect에 대한 뒷정리를 해주는 cleanup 함수를 주로 반환한다.

옛날 React에서 Lifecycle hook 쓰는 법

class DetailPage extends React.Component {
  componentDidMount() {
    // DetailPage 컴포넌트가 로드된 뒤에 실행할 코드
  }
  componentDidUpdate() {
    // DetailPage 컴포넌트가 업데이트된 뒤에 실행할 코드
  }
  componentDidUnmount() {
    // DetailPage 컴포넌트가 제거된 뒤에 실행할 코드
  }
}

요즘 React에서 Lifecycle hook 쓰는 법

import { useState, useEffect } from 'react';

function DetailPage() {
 	useEffect( ()=>{
      // 여기 적은 코드는 컴포넌트가 로드 & 업데이트될 때마다 실행됨
      console.log(1)
    });
}

-> 상단에서 useEffect를 import 해온 뒤에, 콜백함수를 추가하여 안에 코드를 적으면 해당 코드는 컴포넌트가 mount & update될 때마다 실행된다.

위의 코드로 이를 시험해보면 콘솔창에 1이 두 번 출력되는데 이는 디버깅을 위해 한 번 더 출력해주는 것이므로 이게 싫다면 index.js 파일의 <React.StrictMode> 태그를 제거해주면 된다.

❗️ useEffect() 밖에 코드를 써도 결과는 똑같은데 왜 굳이 이 안에 써야 할까?

: 사실 컴포넌트는 mount & update 될 때 function 안에 있는 코드를 다 읽고 지나가기 때문에 useEffect() 밖에 코드를 작성해도 결과는 같다. 그럼에도 useEffect()를 사용하는 이유는 useEffect() 안에 적은 코드는 Html이 랜더링 된 후에 동작하기 때문이다. 이렇게 되면 조금 더 빠르고 효율적이게 코드를 짤 수 있다.
: 그러므로 쓸데없는 기능은 useEffect 안에서 구현하자!

• useEffect() 쓰는 이유
  : useEffect 안에 있는 코드는 Html 랜더링이 다 된 뒤에 실행된다. 그러므로 조금 더 효율적이고 빠르게 실행할 수 있다. (html 먼저 사람들에게 보여주니까)

• 주로 언제 useEffect()를 사용할까?
  ㄴ 어려운 연산
  ㄴ 서버에서 데이터를 가져오는 작업
  ㄴ 타이머 장착

• 왜 이름이 Effect 일까?
  Side Effect (함수의 핵심 기능과 상관없는 부가기능)에서 따와서 이름 지었다. 이 Side Effect는 컴포넌트가 랜더링 된 이후에 비동기적으로 처리되어야 하는 부수적인 효과들을 뜻한다.