React - useEffect 훅 (이펙트 함수, 클린업 함수)

2021.12.10 — React

React를 함수 컴포넌트 기반으로 개발한다면 훅을 사용해서 컴포넌트를 구성하게 된다.

클래스 컴포넌트의 라이프사이클 메소드를 대체 할 수 있는 useEffect 훅에 대해서 알아본다.

useEffect를 알기전에 먼저 React에서의 마운트, 언마운트의 개념에 대해 알아본다.

마운트(mount)
마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다.

언마운트(unmount)
언마운트는 컴포넌트가 삭제될 때 거치는 과정이다.

useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

기본적인 useEffect 훅의 형태는 다음과 같다.

1useEffect(() => {
2    (이펙트 함수)
3    return {
4        (클린업 함수)
5    };
6}, [의존값]);

기본적으로 useEffect는 두번째 인자로 배열 형태의 의존값을 필수로 가진다. 의존값이 처음으로 생성 됐을 때와 변경 될 때 이펙트 함수가 실행된다.

클린업 함수는 useEffect의 return 값으로 정의하는데, 컴포넌트가 삭제될 경우 함수가 실행된다.

1const [count, setCount] = useState();
2
3useEffect(() => {
4    alert("count changed");
5}, [count]);

위 처럼 count라는 state 값을 의존성 배열에 넣으면 count가 초기에 생성 됐을 때와 count가 변경 됐을 때 alert가 뜨게 된다.

그렇다면 useEffect에 의존값을 넣지 않으면 어떻게 될까?

1const [count, setCount] = useState();
2const [name, setName] = useState();
3
4useEffect(() => {
5    alert("count changed");
6});

위 예제에서는 count와 name이라는 두 개의 state를 사용한다. 앞서봤던 예제에서는 count를 의존값으로 넣어 값이 변할 때마다 이펙트 함수를 실행시켰지만, 의존값을 넣지않은 위의 예제는 매 렌더시마다 alert가 뜨게된다.

예를들어 name의 값이 변경되어도 alert("count changed") 가 실행된다는 뜻이며 이렇게 될 경우 일반 함수를 정의하는 것과 같기에 useEffect를 쓸 이유가 없다.

그렇다면 의존값에 빈 배열을([]) 넣으면 어떻게 될까? 의존값에 빈 배열을 넣는 패턴은 실제로 많이 사용되는 패턴이다.

1useEffect(() => {
2    alert("mount");
3}, []);

우선 앞선 예제를 통해 이펙트 함수는 의존값이 변경되거나 처음으로 생성되었을 때 실행된다는 것을 알 수 있다.

빈 배열을 의존값으로 넣을 경우도 마찬가지로 처음으로 생성되었을 때 실행된다. 하지만 빈 배열은 처음 생성되었을 때 이후로 변경될 수 없기 때문에 처음 생성시에만 이펙트 함수가 실행된다.

따라서 useEffect에 빈 배열을 넣는 경우는 처음으로 변수가 생성될 때, 즉 컴포넌트가 최초로 렌더링 되는 마운트 (mount)시에 단 한번 실행될 때를 위해 사용한다.

이는 클래스 컴포넌트의 라이프사이클 메소드에서 componentDidMount()의 기능과 같다고 할 수 있다.

1useEffect(() => {
2    return () => {
3        alert("unmount");
4    };
5}, []);

언마운트는 빈 배열과 클린업 함수를 조합해서 구현 할 수 있다. 이렇게 구현 할 경우 컴포넌트가 없어지는 순간 alert("unmount")가 실행되고, 그 이전엔 실행되지 않을 것이다.

이는 클래스 컴포넌트의 라이프사이클 메소드의 componentWillUnmount()의 기능과 같다고 할 수 있다.