React : Lifecycle, useEffect (사용법)

Lifecycle

mount (장착)

컴포넌트가 있는 페이지로 들어갔을 때 컴포넌트가 mount(장착)된다.

update (업데이트)

컴포넌트 안에서 state가 조작되는 등 재랜더링되어 업데이트가 일어난다.

unmount (제거)

다시 홈으로 돌아가면 Detail 컴포넌트가 unmount(제거)된다.

---

Lifecycle hook (간섭)

그리고 위 Lifecycle들이 일어나는 시점에 코드를 실행할 수 있다.

사용법 - 옛날 class 문법

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

사용법 - 요즘 문법 (useEffect)

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (생략)
}

* console에 log가 두번 찍히는 이유는 디버깅을 위해서라고 한다. 실제 발행한 이후에는 한 번만 실행된다.
  -> index.jsdp <React.StrictMode>

---

useEffect

위쪽 요즘 문법 Lifecycle hook을 useEffect 밖에 console.log를 적어도 똑같이 컴포넌트 mount & update시 실행된다.
이는 컴포넌트 mount & update시 function 안에 있는 코드도 다시 읽고 지나가서 그렇다.

왜 이름이 Effect일까?

Side Effect (함수의 핵심기능과 상관없는 부가기능)에서 따온듯.

---

useEffect 안에 적는 코드 예시

useEffect 안에 있는 코드는 html 렌더링이 끝난 후에 동작한다. 그러므로 오래걸리거나 로딩이 끝난 후에 동작해도 좋은 코드를 넣으면 된다.

• 어려운 연산
• 서버에서 데이터 가져오는 작업
• 타이머 기능

---

출처 : 코딩애플 https://codingapple.com/