useEffect란?

https://ko.reactjs.org/docs/hooks-effect.html
클래스형 컴포넌트에는 componentDidMout 같은 메서드들이 있다.
그렇다면 함수형 컴포넌트에서의 생명주기 관련 훅은 무엇일까?
그것이 바로 useEffect

언제쓸까?
렌더링 중에는 완료되지 못하지만 컴포넌트에 영향을 미치는 작업
fetching data, chanig dom 과 같은 것들!

side-effect

: React 컴포넌트가 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side-effect 라고 말한다.
어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다!
요청 즉시 1차 렌더링을 함으로써 API가 응답이 늦어지거나 응답이 없을 경우 영향을 최소화 시킬 수 있음!

useEffect

useEffect(callback[, dependencies]);

componentDidMount

// 의존성 배열 [] 에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)

useEffect(()=>{
		console.log("마운트 됨!!")
	},[])

componentDidUpdate와 비슷

// 의존성 배열이 없기 때문에 뭐 하나라도 바뀌면 무조건 다시 실행됩니다.
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	})

// someState가 수정될때만 리렌더 해주기
useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")
	},[someState])

componentWillUnmount

useEffect(()=>{
		console.log("수정하고 다시 그려짐!!")

		//이부분이 끝나고 진행할 것들
		return(()=>{
			console.log("여기서 나갈래요!!")
		})

	})

componentDidUpdate와 비슷하지만 다른점 하나는, Mount 되자마자 실행되는 점입

---

인용

💡 useEffect의 실행 시점
→생명주기 메서드,훅 은 기본적으로 렌더(화면그리기) 이후에 실행됩니다.
**따라서 useEffect와 lifecycle 메서드는 렌더 이후에 실행됩니다.**

useEffect 사용시 주의 사항

💡 useEffect 안에서 setState의 사용
→useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양하시는게 가장 좋습니다.
컴포넌트가 마운트된 이후에 setState를 적용하게 되면,
1. state가 변경되고,
2. 변경된 state로 컴포넌트가 다시그려지게(=리렌더) 됩니다.
즉, useEffecrt 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으키게 되고 성능면에서 비효율적이게 됩니다.

---

정리

화면이 처음 떴을때 실행.
특정값을 [] 빈배열을 넣을 떄.
life cycle중 componentDidmount처럼 실행

화면이 사라질때 실행(clean up함수).
componentWillUnmount처럼 실행

특정값에 넣은 파라미터값이 업데이트 됬을때 실행.
componentDidUpdate처럼 실행.

---