[React] - Lifecycle, useEffect

componets 

생성 - mount

재렌더링 - update

삭제 - unmount

 

 

"Detail 컴포넌트 등장 전에 이것좀 해줘"

"Detail 컴포넌트 사라지기 전에 이것좀 해줘"

"Detail 컴포넌트 업데이트 되고나서 이것좀 해줘"

이렇게 코드좀 실행해달라고 간섭할 수 있는데

간섭은 갈고리를 달아서 합니다. 

 

갈고리를 달아서 코드를 넣어주면 됩니다.

그럼 진짜 페이지 장착시, 업데이트시, 제거시 코드실행가능 

갈고리는 영어로 hook이라고 합니다. 

그래서 저걸 Lifecycle hook 이라고 부릅니다. 

 

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    ...
    console.log('안녕')
  }, []);
  
  return (생략)
}

useEffect(()=>{ 실행할코드 }, [count])

 

useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데

거기에 변수나 state같은 것들을 넣을 수 있습니다.

그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행해줍니다.

그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행되겠군요. 

(참고) [ ] 안에 state 여러개 넣을 수 있음

 

아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않습니다.

 

 

useEffect(()=>{ 실행할코드 })

재렌더링마다 코드를 실행

 

useEffect(()=>{ 실행할코드 }, [])

컴포넌트 mount시 (로드) 1회만 실행

 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

useEffect 안의 코드 실행 전에 항상 실행

 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])

컴포넌트 unmount시 1회 실행

 

useEffect(()=>{ 
  실행할코드
}, [state1])

state1이 변경될 때만 실행