useEffect

컴포넌트는 생성이 될수도 있고 (mount), 재렌더링이 될 수도 있고(update), 삭제가 될 수도 있음(unmount)
생성될때, 재렌더링될때, 삭제가 될 각 시점에 동작 하고 싶을때
옛날엔 class를 이용해서 구현했지만
요즘엔 useEffect를 쓴다.

import {useEffect} from 'react';

function App(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return ~~~
}

예시를 출력문으로 넣어놓긴 했지만
useEffect안에 오래걸리는 코드를 넣어놓으면,
먼저 html로드가 되고 실행하게 될테니 사용자 입장에서 좀더 쾌적하게 느낄 수 있을 것 같음
보통 반복연산, 서버에서 데이터 요청해서 가져오는거 ,타이머 다는 것들이 들어간다고함.

특정 변수가 변할때마다 실행하기

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

컴포넌트 mount(사이트 로딩) 최초 1회만 실행하기

위 코드에 변수자리에 아무것도 안넣으면 됨

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

useEffect 내에서 실행 순서 (cleanup function)

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [변수])

useEffect가 컴포넌트가 mount, update될때마다 실행되는 것이기 때문에,
오래걸리는 작업이 여러번 실행될 수 있음.
그래서 타이머라던지, 데이터 요청이라던지 기존 것들을 cleanup해야하는 상황에서
return 뒤에 초기화를 해주고 useEffect해야함.
보통 타이머제거, socket연결요청제거, ajax요청 중단 이런 코드들을 쓴다고함.

unmount시 1회 실행

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

변수 변경될때만 실행

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

---

코딩애플 리액트 강의를 보고 정리한 글임