useEffect

함수형 컴포넌트의 생명주기 훅 useEffect

• 클래스형 컴포넌트에는 componentDidMout 와 같은 생명주기 메소드들이 있습니다.
• 함수형 컴포넌트에서의 생명주기관련 훅은 useEffect 입니다.

useEffect

componentDidMout

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

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

componentDidUpdate 와 비슷

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


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

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

componentWillUnmount

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

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

	})

useEffect 의 실행 시점

• 생명주기 메소드, 훅 은 기본적으로 렌더 이후에 실행됩니다.

useEffect 사용시 주의 사항

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