useEffect

앞서 useEffect를 간단하게 소개하면서 클래스형에서의 라이브 사이클이라는것을 소개했다.
그리고 함수형에서의 라이프 사이클을 언급하고 넘어갔다.
그럼 함수형에서는 라이프 사이클이 어떻게 적힐까?

render(),componentDidMount(),componentDidUpdate(), componentWillUnmount()
이 해당함수들은 class함수의 Component라는 것에서 상속받아오는것이다.
따라서 함수형에서는 사용이 불가하다.

그렇다면 어떻게 생명주기를 표현할까?

바로 위에서 언급했던 useEffect라는 녀석을 사용한다.

useEffect(함수,dependencyarray)

보다시피 첫번째 매개변수(파라미터)로는 함수가, 두번째 매개변수(파라미터)로는 의존성배열(dependencyarray)가 들어간다.

이 뒤의 의존성배열이라는것은 무엇일까?

이 배열이 없다면 무언가 변경될때마다 실행되게된다.
빈 배열을 넣어주면 재 실행할 것 없이 처음 한번만 실행되고,
대괄호 안에값을 넣어주면 그 값이 변경될때 실행된다.
이렇게 의존하고있다고 하여 의존성 배열 이라고 부른다.

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

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


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


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

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

	})

의존성배열이 중요한이유->
: useEffect에 의존성배열을 적어주지 않고 return도 해주지 않았다면 무한랜더되는것을 볼 수 있다.

주의 :

useEffect안에서 setState를 사용할 때는 필요한 경우가 아니라면 지양.

-> 컴포넌트가 마운트되고 -> setState를 적용하면 state가 변경되고, 다시 리랜더링(다시그려짐)이 일어난다.
즉, 이렇게 되면 불필요한 리렌더나 무한루프를 만날수 있다.---> 비효율적.

브라우저가 실행되자마자 실행하려면, useEffect를 사용하지않고 그냥 적어줘도 되지않나요?

→ 가능은 합니다. 하지만, 리렌더면에서 비효율적으로 작동됩니다. (계속해서 실행됩니다!)

리렌더의 조건에는 state의 변화가 있습니다. 그렇다면 컴포넌트의 state가 변할때마다 다시 렌더하게 되겠죠? 
불필요한 리렌더는 반드시 제거해야 합니다.