useEffect

Kingmo·2022년 4월 9일
0

1. useEffect

클래스형 컴포넌트에는 componentDidMount와 같은 생명주기 메서드들이 있고
함수형 컴포넌트에는 여기서 다룰useEffect라는 생명주기관련 훅이 있다.

2. 의존성배열 Deps

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수로 함수가 실행되는지 안되는지에 의존한다.

따라서 useEffect는 의존성 배열의 내용이 변경됐을 때 부수 효과 함수가 실행된다.

useEffect(function, deps)
  • function : 실행하고자 하는 함수
  • deps : function을 실행시킬 조건, 배열형태이다.
    따라서 여러 조건을 넣을 수 있다.
    deps에 특정 값을 넣을 경우 컴포넌트가 mount될 때, 지정 값이 바뀔때 함수를 실행한다.

3. useEffect의 실행 시점

생명주기 메서드, 훅 은 기본적으로 렌더(render) 이후에 실행된다.
따라서 useEffect와 lifecycle 메서드는 렌더(render) 이후에 실행된다.

아래 코드를 보자!

useEffect( () => {
	console.log("수정하고 다시 그려짐!")
}, [] )
console.log("나는 언제 실행되게?")

생명주기 메서드, 훅은 렌더(render) 이후에 실행 되기 때문에
console.log("나는 언제 실행되게?")가 먼저 실행되고 이 후에
console.log("수정하고 다시 그려짐!")이 실행된다.


4. useEffect의 잘못된 사용 예

useEffect( () => {
  setCount(prev => prev + 1);
}, [count] );

위 코드는 useEffect의 잘못된 사용 예이다.
이는 아래와 같이 작동한다.
Mount시 useEffect가 실행되고
setCount으로 count가 업데이트되고
의존성 배열 [count]에 의해 다시 useEffect가 실행되고
setCountcount가 업데이트되고
의존성 배열 [count]에 의해 다시...useEffect가...

이와같이 무한루프에 빠지게된다.


5. useEffect로 생명주기 다루기

componentDidMount - useEffect

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

위와같이 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 함수를 실행하고 렌더해주고 끝나게 된다.
즉, 처음 Mount할 때 한번만 실행한다.

componentDidUpdate - useEffect(비슷할 뿐 똑같이 작동하지는 않는다.)

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

위 문은 의존성 배열이 없기 때문에 렌더링할 때마다 함수가 실행된다.

useEffect( () => {
	console.log("someState가 바뀔 때마다 다시 그려짐!")
}, [someState] )

위 문은 someState가 업데이트 되었을 때만 함수가 실행되는데, 처음 Mount시에 한 번 실행한다.

위 소제목에서 비슷할 뿐 똑같이 작동하지는 않는다라 한 부분이 바로 이부분이다.
componentDidUpdate는 Mount시에는 실행하지 않지만,
useEffect는 기본적으로 Mount되자마자 함수를 한 번 실행한다.

componentWillUnmount - useEffect

useEffect( () => {
	console.log("수정하고 다시 그려짐!")
    
    // 이 부분이 끝나고 진행할 것들
  	return () => {
    	console.log("여기서 나갈래요!")
    }
}, [] )

위 문의 return () => {}은 컴포넌트가 사라질 때 실행하는
뒷정리하는 함수라 생각하면 된다.

profile
Developer

0개의 댓글