[React] useEffect (1)

 

컴포넌트는 라이프사이클이 존재한다.

거창한건 아니다

 

 

크게 3가지로 나눌 수 있는데

---

1. 생성된다. (mount)

2. 업데이트된다. (update)

3. 삭제된다. (unmount)

---

각각의 이벤트가 실행될 때 구현하고 싶은 코드를 작성하는 것을

useEffect라고 한다.

 

 

 

바로 컴포넌트를 살펴보자

 

import {useState, useEffect} from 'react';

function DetailPage(){

  useEffect(()=>{
    console.log('Hello World')
  });
  return (생략)
}

 

 

여기선 DetailPage 라는 컴포넌트가

페이지에서 처음 렌더링이 되거나

혹은

State 조작에 의해서 컴포넌트 내용이 변경될 때

useEffect 함수 안의 코드가 실행된다.

 

위 컴포넌트는

변경(update)되거나 처음 생성(mount)될 때

콘솔창에 Hello World라는 문구가 출력된다.