[React] 컴포넌트 Lifecycle과 useEffect

✅ 컴포넌트의 LifeCycle

• 컴포넌트도 사람처럼 태어나고 변화를 겪고 사라지는 라이프사이클이 있다!!
• 태어남 => 페이지에 장착된다 (Mount)
• 업데이트 => 재렌더링됨 (Update)
• 제거됨 => (Unmount)
• 이 라이프사이클 각 시기에 따라 특정 코드가 작동될 수 있도록 훅(hook)을 걸어둘 수 있다

✅ class 컴포넌트의 LifeCycle 함수

• class 컴포넌트는 라이프사이클과 관련된 명확한 함수를 포함하고 있음

class Compo extends React.Component {
	componentDidMount(){
		// 컴포넌트 mount시 실행할 코드
	}
	componentDidUpdate(){
		// 컴포넌트 update시 실행할 코드
	}
	componentWillUnmount(){
		// 컴포넌트 unmount시 실행할 코드
	}
}

✅ 함수 컴포넌트에서는 useEffect를 사용

🔸 기본 개념

• class 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태와 유사
• useEffect 내부 콜백함수는 재렌더링시 모든 html이 렌더링 된 후 마지막으로 동작
• 복잡한 코드로 뒤쪽 코드가 지연되는 현상을 방지
• 때문에 어려운 연산이나 setTimeout 등 타이머가 들어가는 경우 useEffect를 활용함

function Compo () {
	useEffect(() => {
		// mount, update시 코드 실행할 코드
	})
}

🔸 의존성 배열

• 파라미터로는 콜백함수 외에도 의존성배열을 받음
• 의존성 배열에 따라서 코드를 실행하는 주기가 달라짐
  - 배열 자체를 입력하지 않으면? => mount, update 시 매번 재실행
  • 빈배열([]) => mount시에만 실행
  • 배열에 state나 변수가 있다면? => 해당 요소들이 변경될 때만 재실행

function Compo () {
	useEffect(() => {
		// mount, update시 코드 실행할 코드
	}, [state, a, b, c])
}

🔸 return (cleanup 함수)

• useEffect 콜백함수 내에는 return문을 넣어줄 수 있는데,
• 이는 콜백함수 내 다른 코드들 보다 먼저 실행됨
• 다만, 마운트 시에는 실행되지 않음!! + 언마운트 시에는 실행!!
• 순서 정리 한 번 하면,
  => 조건에 따라 useEffect가 실행될 재렌더링이 일어나면
  => html 요소들 렌더링
  => useEffect 콜백함수 return문 실행
  => useEffect 콜백함수 내부 코드 실행
  

• 만약 콜백함수 내에 리턴문만 있다면, 해당 코드는 unmount시에만 실행

• 리턴문 내의 함수는 clean up function이라고도 부르는데,
• 재렌더링이 잦은 react 특성상 타이머나 서버 데이터 요청 같은 작업의 경우 중복 타이머나 요청이 생길 수 있음
• 그래서 먼저 실행되는 return문 내부에 기존 타이머나 요청을 제거하는 clean up 코드를 넣어두는 것

// 예시코드
useEffect(()=>{
	let timer = setTimeout(()=>{
		setTf(false);
	}, 2000)

	return () => clearTimeout(timer)
    
}, [])