[React] Lifecycle

컴포넌트 Lifecycle

1. mount (생성)

2. update (재랜더링)

3. unmount (삭제)

 

 

React에서 Lifecycle hook 쓰는 법

• useEffect 안의 함수는 mount, update될 때 실행됨
• useEffect 안의 함수는 html 렌더링 이후에 동작

import {useState, useEffect} from 'react';

function Detail(){

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

 

 

useEffect를 사용하는 경우

1. 오래걸리는 반복 연산
2. 서버에서 데이터 가져오는 작업
3. 타이머 사용 시

 

 

 

useEffect 실행조건 설정하기

• [ ] 안에 있는 변수나 state가 변경 될때 useEffect가 실행됨
• 여러개의 변수나 state를 넣을 수 있음
• 아무것도 넣지 않으면 mount 시 1회만 실행됨

useEffect(()=>{ 실행할코드 }, [변수 or state])
useEffect(()=>{ 실행할코드 }, [])   // mount시 1회만 수행

 

 

 

useEffect가 동작하기 전에 특정코드 실행하기 (clean up Function)

useEffect(()=>{ 
  // 그 다음 실행되는 코드
  return ()=>{
    // 먼저 실행되는 코드
  }
}, [...])

• 타이머 제거, socket 연결요청제거, ajax요청 중단 과 같은 기능을 하는 코드를 주로 작성
• 컴포넌트  unmount 시에도 clean up function 안에 있는 코드가 1회 실행됨

 

 

 

 

타이머 사용하기 - setTimeout()

• 단위 : ms

setTimeout(()=>{ 1초 후 실행할 코드 }, 1000)

타이머 제거하는 방법 (예시)

useEffect(()=>{ 
  let timer = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(timer)
  }
}, [])

 

 

 

 

 

처음으로 쌓인 눈이 첫눈 아니겠나며,,

버스 기다리면서 만들다가 손 깨질뻔 했당 으 추워