밸~하!

밸로그 여러분 안녕하세요!!

오늘의 포스팅 주제는 바로 !useEffect입니당!

지난시간에 컴포넌트 생명주기에 대해서 알아보았는데요

저번 포스팅에서 이야기 드렸던것처럼 조금 더 간편하게 React에서 지원하는게 있습니다!

바로 오늘의 주제인 useEffect인데요!

그럼 본격적으로 useEffect에 대해서 알아볼까요~??

고고~

1. useEffect란

먼저 useEffect 의 정의에 대해서 알아보겠습니다!
useEffect란 React의 Hook중의 한개인데요!
지난시간에 봤던 mount를 조금더 간단하고 이해하기 쉽게 사용할수 있게 해주는 것입니다
즉
리액트 컴포넌트가 렌더링 될 때마다 특정작업을 실행할수 있도록 하는 Hook입니다!

useEffect는 컴포넌트가 mount가 되었을때 , unmount가 됬을때, update가 됬을때 특정작업을 할수 있게 됩니다!
즉 클래스형에서 사용하던 생명주기 메소드를 함수형 컴포넌트에서도 사용할수있게해주는 아주 유용한 hook이라는것이죠!

사용방식은

쉽게 생각해서
개발을 할때
페이지가 실행됬을때 특정작업을 실행하게 하고 싶으면
useEffect를 사용해서 페이지가 랜더링됬을때 실행하게 할수있습니다!

뿐만아니라
특정 값이 변경이 됬을때 실행할수도 있게되는데요!

예를들어

useEffect(()=>{
	console.log(number)
    console.log("변경시 마다 실행)
},[])

이런식으로 number라는 변수가 바뀔때마다 실행할수도 있게합니다!

정말 편하지 않나요??

저번시간에 포스팅했던 클래스형 컴포넌트에서 사용했던 생명주기를 이렇게 함수형 컴포넌트에서 간단하게 화살표함수로 사용할수 있게됨으로!
개발의 효율도 높일수 있게되고 가독성도 높아져서 훨씬 사용하기 좋겠죠??

또한 종료가 될때 특정 이벤트를 실행하고 싶다면 이렇게도 사용할수 있습니다!

useEffect(()=>{
 return ()=>{
 	 console.log("사라질때 실행")
 }
})

이렇게 useEffect안에 return을 넣어주게 된다면 !!

페이지안에서 작업을 종료할때 실행을 시켜줄수 있게됩니다!

자! 이번 포스팅은 여기까지입니다!

어제와 이번포스팅으로 해서 클래스에서의 생명주기와 이 생명주기가 함수형컴포넌트에서는 useEffect라는 훅으로 구현할수가 있게 된다는것을 알게됬습니다!

오늘도 이렇게 지식한개씩 쌓아가셨으면 좋겠습니다~~

그럼 이번포스팅은 여기까지!
다음 포스팅에서 뵈용!!

그럼 밸~~바!