React : useEffect, clean up (실행조건)

useEffect 실행조건

useEffect(()=>{ 실행할코드 }, [변수나state]);

• useEffect()의 둘째 파라미터로 []를 넣으면, 안의 변수나 state가 변할 때마다 useEffect 안의 코드를 실행한다.
• []안에는 state나 변수를 여러개 넣을 수 있다.
• [] 안에 아무것도 넣지 않으면 mount(로드)시에만 1회 실행한다.

---

clean up function

useEffect(()=>{ 
  //함수 A
  return ()=>{
    //함수 B
  }
}, [변수나state])

예시

useEffect(()=>{
  let timer = setTimeout(()=>{ setAlert(false) },2000)
  return ()=>{ clearTimeout(timer) } // 기존 타이머 제거
}, []);

언제 실행될까?

• 의존성 배열에 변수나 state를 넣으면, update(업데이트)되기 전과 unmount(마운트 해제)될 때 실행된다.
• 의존성 배열을 비워두면, 컴포넌트가 unmount(마운트 해제)될 때만 실행된다. 
  (cleanup함수는 mount시에는 실행되지 않는다.)

언제 쓸까?

타이머나 이벤트리스너, 구독 등의 상황에서 컴포넌트가 다시 렌더링될 때마다 이벤트 리스너 등이 중복으로 등록되는 것을 방지하게 위해 코드를 해제하고 시작한다.

---

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