Side Effect를 처리해야 한다

useEffect는 일반적으로 함수형(Functional) 컴포넌트에서 부수 효과(Side Effect)를 처리하기 위해 사용한다.

Side Effect란?

Side Effect는 컴퓨터 과학에서 함수가 결과값 이외에 다른 상태를 변경하는 것을 의미한다.

이러한 의미를 React의 컴포넌트에 적용한다면, UI를 렌더링하는 작업 이외의 부수적인 효과가 될 것이다. 일반적으로 Side Effect의 예시는 아래와 같다.

• 외부 데이터 fetching
• 브라우저 API(window, document 등)의 사용
• setTimeout, setInterval 등의 타이밍 함수 사용

함수형 컴포넌트에서 이러한 Side Effect를 처리하기 위해 useEffect가 나오게 되었다. useEffect의 Effect가 Side Effect를 의미한다.

useEffect

Side Effect를 왜 useEffect에서 처리해야 할까?

React의 함수형 컴포넌트는 함수를 실행함으로써 렌더링 된다.
Side Effect는 예상할 수 없는 결과를 반환한다. 이러한 Side Effect가 함수를 실행하는 과정에서 발생한다면 React가 컴포넌트를 렌더링 하는 데에 방해가 된다.

useEffect는 컴포넌트가 모두 렌더링 된 후 실행된다. 따라서 useEffect 안에서는 Side Effect 처리가 가능하다.

useEffect 사용법

useEffect(function, deps?)

useEffect는 다음과 같이 두 가지 인자를 받는다.

첫 번째 인자로 함수를 받는다. 컴포넌트 렌더링이 완료된 후 실행할 함수를 정의한다.
두 번째 인자로 생략 가능한 의존성 배열(deps)을 받는다.

의존성 배열(deps)

의존성 배열은 useEffect를 언제 실행할지 결정한다.

의존성 배열이 존재하지 않는다면 컴포넌트가 렌더링 될 때마다 useEffect가 실행된다.

useEffect(() => {
  fetchData();
});

의존성 배열이 존재한다면, 의존성 배열에 포함된 변수가 변경될 때마다 useEffect를 실행한다. Obejct.is 함수를 사용하여 변수의 변경 여부를 확인한다.
의존성 배열이 빈 배열이라면 컴포넌트의 첫 렌더링에만 useEffect가 실행된다.

useEffect(() => {
  fetchData(dataId);
}, [dataId]);

클린업(clean-up) 함수

useEffect는 클린업(clean-up) 함수를 반환할 수 있다. useEffect의 return을 통해 컴포넌트가 언마운트 될 때 어떤 동작을 할 것인지 정의할 수 있다.
클래스형 컴포넌트의 componentDidUnMount와 비슷한 기능을 수행한다고 할 수 있다.

일반적으로 클린업 함수를 사용하는 경우는 아래와 같다.

• 타이밍 함수를 clear 할 때
• 이벤트 리스너를 제거해야 할 때
• 웹 소켓의 연결을 끊어야 할 때
• ...

useEffect 사용시 주의할 점

useEffect에서 컴포넌트의 상태값을 바꾸면 컴포넌트가 리렌더링 되기 때문에 성능에 영향을 미칠 수 있다.
따라서 useEffect는 꼭 필요한 경우에만 사용하는 것이 좋다.

렌더링 과정에서 계산할 수 있거나 이벤트 핸들러에서 처리할 수 있는 작업은 useEffect 밖에서 실행하자.

const [a, setA] = useState(0);
const [b, setB] = useState(0);

// ❌ 이러한 방식은 피하는 것이 좋다.
const [sum, setSum] = useState(0);
useEffect(() => {
  setSum(a + b);
}, [a, b]);

const [a, setA] = useState(0);
const [b, setB] = useState(0);

// 🟢 이렇게 사용하자. 어차피 상태값이 바뀌면 리렌더링 되면서 sum이 업데이트 된다.
const sum = a + b;

References

https://ko.react.dev/learn/escape-hatches
https://velog.io/@okxooxoo/React-useEffect%EB%8A%94-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C
https://velog.io/@yeonjin1357/React-Side-Effect-%EA%B7%B8%EB%A6%AC%EA%B3%A0-useEffect