useEffect hook

useEffect 함수는 리액트 컴포넌트가 렌더링 될때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

component가 mount, unmount, update 됐을 때 설정해 놓은 특정 작업을 처리할 수 있어서 리액트 기반의 어플리케이션을 만들 때 굉장히 유용하게 많이 사용된다. useEffect이 사용되는 시점을 중요하게 두고 프로젝트에 사용하다보면, 어떻게 적절히 사용할 수 있는지 더 깊게 알게 될것이다. 

 

useEffect는 기본적으로 다음과 같은 형태를 가지고 있다.

useEffect(function, deps)
- function : 수행하려는 작업
- deps : 배열의 형태로, 구독하고자 하는 값 또는 빈배열

 

1. Component가 mount 되었을 때 (처음 페이지가 렌더링 될때)

컴포넌트가 화면에 처음 렌더링 될때 한번만 실행하고 싶을 때 deps에 빈배열을 넣는다.

useEffect(()=> {
	console.log('useEffect');
	console.log('렌더링 될때 실행된다.')
}, []);​

 

2. Component 가 update 되었을 때 ( state, props 가 바뀔 때)

특정 값이 새롭게 업데이트 될때 실행하려면 deps를 이용하면 된다. deps는 dependency를 말하며 의존성을 뜻한다. 이 배열 안에는 검사하고 싶은 값을 넣어두고, 그 값이 바뀌었을 때 useEffect가 실행되게 한다는 의미이다.

useEffect(()=> {
	console.log(age);
	console.log('나이가 바뀌면 실행된다!');
}, [age]); 
// 나이가 바뀌었을 때(업데이트 되었을 때) 실행되어야 하므로 검사하려는 값에 age를 넣는다.

useEffect는 mount 될때와 update 될때 모두 실행된다. useEffect의 이러한 점은 클래스 컴포넌트의 두가지 메서드를 동시에 사용하는 것과 같은 효과를 낸다.

기존의 클래스 컴포넌트의 라이프 사이클을 사용할 경우, 컴포넌트의 최초 렌더링을 할 때와 그 이후 업데이트할 때 특정 작업을 수행하려면 2가지의 메서드를 함께 사용해야 한다.

1. 컴포넌트가 처음 렌더링(mount) 될때 할 작업을 componentDidMount 메서드를 이용했는데, 이 메서드는 최초 렌더링을 할 때 한번 호출되므로 그 이후에는 호출이 되지 않는다.
2. 이후에 값이 업데이트 되었을 때 수행할 작업은 componentDidUpdat 메서드를 사용하여 처리하였는데, 이 메서드는 최초 렌더링시에는 호출이 되지 않는다.

componentDidMount() {
	doSomething();
}

componentDidUpdate(prevProps, prevState) {
	if (prevProps.value !== this.props.value) {
		doSomething();
	} // props의 value 값을 비교하여 value 값이 변했을 때 작업을 수행
}

클래스 컴포넌트에서 위와 같이 했던 작업을 useEffect를 사용하면 deps를 이용해 다음과 같이 간단하게 만들수 있다. 

useEffect(()=> {
  doSomething()
}, [value])

 

3. Component 가 unmount 될 때 (View에서 사라짐) & 업데이트 되기 직전

컴포넌트가 화면에서 사라질 때를 컴포넌트가 unmount(언마운트) 된다고 하는데, 이때 컴포넌트의 상태를 초기화한다.

컴포넌트의 상태를 초기화하기 위해 cleanup 함수를 반환하도록 하는데, 이는 return 뒤에 나오는 함수이며 useEffect에 대한 뒷정리 함수라고 한다.

useEffect(()=> {
	console.log('effect');
	doSomething();
	return () => {
		console.log('clean up');
		cleanup()
	}
},[])

컴포넌트가 언마운트 될때만 clean을 하고 싶을 때는 deps 배열을 빈배열로 두고,

특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶다면 deps 배열 안에 검사하고 싶은 특정값을 넣어주면 된다.

 

이렇게 위의 3가지 시점에서 useEffect hook 을 사용할 수 있다.

useEffect 안에서 사용하는 상태(state)나 props가 있다면 useEffect의 deps에 꼭 넣어주어야 한다. 만약 useEffect 안에서 사용하는 값을 넣어주지 않는다면 useEffect 안의 함수가 실행될 때 최신 상태와 props를 가리키지 않기 때문이다.

 

deps 에 '[]' 리터럴을 두번째 파라미터로 생략한다면, 컴포넌트가 리렌더링 될때 마다 useEffect 함수가 실행되어 우리가 이 hook을 사용한 의미가 없어지므로 주의해야 한다.

 

useEffect를 실제 프로젝트에서 사용하면서 가장 중요하게 느낀점은 deps 배열에 적절한 값을 넣는 것이다.

한번은 deps에 잘못된 값을 넣는 바람에 무한 루프를 돌면서 재렌더가 반복되는 에러가 발생했던 적도 있었다.

특정 로직을 알맞는 시점에 실행하기 위해서 useEffect 의 deps 값을 유의해서 넣어주어야 함을 잊지 말자.