[💎React] Lifecycle, useEffect

Lifecycle

컴포넌트가 표시되고 사라지는 순간까지의 하나의 생명 주기.

mount: 컴포넌트가 표시될때 ->update : 컴포넌트 내부 요소가 업데이트될 때 -> unmount : 컴포넌트가 사라질 때

useEffect

useEffect는 위의 세 시점 중 하나를 골라서, 해당 시점에 특정한 함수가 실행되도록 하는 Hook이다.

크게 보면 다음 두 가지로 사용할 수 있다.

그럼, 활용하는 방법에 대해 알아보자.
1. 상단에서 import {useEffect} from 'react'
2. 콜백함수 추가해서 안에 코드 적으면, 컴포넌트가 mount& update 될 때마다 실행됨

import {useEffect,useState} from 'react'

function App(){
useEffect(()=>{console.log(111)})
let [count,setCount]=useState(0)
return(
<div>
<Hi/>
<button onClick={()=>{setCount(count+1)}}>버튼</button>
</div>
)
}
function Hi(){
return(
<>
<h4>안녕!</h4>
</>
)
}

useEffect의 용도

페이지 로드될때나 버튼 클릭할 때나 콘솔창에 열심히 111이 출력된다.
근데 그냥 이런 기능만 되는거라면 굳이 useEffect 안에 적는 것의 장점을 잘 모르겠다. 그냥 useEffect()밖에 적어도 되지 않나? 라는 의구심이 들때, 알게 된 사실.
바로 useEffect 안에 적은 코드는 HTML이 렌더링된 이후에 동작한다는 것!

여기서 왜 useEffect라고 작명했는지도 알면 도움이 되는데,
함수 안에 핵심기능 외에 쓸데없는 기능들은 프로그래밍 용어로 side Effect라고 한다. useEffect도 이와 마찬가지로, 컴포넌트의 핵심기능은 html 렌더링이기에, 이 외 쓸데없는 기능들은 다 useEffect안에 집어넣으라는 것이다.
반복연산, 서버에서 데이터가져오는 작업, 타이머 이런건 useEffect안에 저장!

mount: 컴포넌트가 표시될 때

useEffect(컴포넌트가 표시될 때 실행할 함수,[])

update: 컴포넌트 내부 요소가 업데이트 될 때

useEffect(오른쪽 리스트에 적은 요소들이 업데이트되는 시점에 실행할 함수,[업데이트되는지 지켜볼 변수/State])

unmount: 컴포넌트가 사라질 때

useEffect(()=>{return ()=> 컴포넌트가 사라질 때 실행할 함수})

실행조건 []

  // mount혹은 update 될때마다 실행
 useEffect(() => {
    setTimeout(() => {
      setBox(false);
    }, 2000);
  });

//최초 mount될때 여전히 실행됨, but 이후 []안값이 달라질때만 렌더링!
   useEffect(() => {
    setTimeout(() => {
      setBox(false);
    }, 2000);
  }, []);

useEffect()의 둘째 파라미터로 []을 넣을 수 있는데(전문용어로 Dependency) 변수나 state등을 넣을 수 있다. 이제[]안의 변수나 state가 변할때만 useEffect안의 코드를 실행해줌. 참고로, 여러개의 state 넣어도 상관없다!
만약 []안에 아무것도 넣지 않으면 mount할때만(페이지 로드할때만) 딱 1회 실행되고 이후로는 실행되지 않는다.

clean up function

useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 넣을 수 있다. mount때마다 타이머를 만들어내고 있으니 몇 백개가 쌓이기도 해 버그를 미연에 방지하고자, 타이머 만들기 전 기존 타이머는 제거해주세요 라는 의미에서 return()=>{}안에 코드를 짜기도 한다. 두번째 파라미터에 [] 까지 써주면 금상첨화!

function App(){
let a=setTimeout(()=>{
	console.log(1)},2000)
useEffect(()=>{
a;
return ()=>{
clearTimeout(a)
}
},[])
 return(
 <div>
 <Hi/>
 </div>
)

참고자료:
애플코딩
유튜브 별코딩