[React] useEffect

📚 useEffect란 무엇인가요?

useEffect 훅은 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 해주는 기능이에요. 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 생명주기 메서드와 유사한 역할을 하죠. 하지만 useEffect는 이 모든 생명주기를 하나의 API로 통합하여 제공해요.

 

여러분이 한 카페에 앉아 있고, 카페의 분위기나 다른 손님들의 대화에 따라 여러분의 기분이나 행동이 달라진다고 상상해 보세요. 이때, 카페의 분위기나 대화는 useEffect 훅의 의존성 배열(dependency array)에 해당하고, 여러분의 기분이나 행동의 변화는 훅 내부에서 실행되는 부수 효과(side effects)에 해당해요. 카페에 처음 들어설 때 기분이 좋아지는 것처럼, 컴포넌트가 마운트 될 때 특정 작업을 수행할 수 있고, 카페의 분위기가 바뀔 때마다 여러분의 기분이나 행동이 그에 맞춰 변화하는 것처럼, 의존성 배열의 값이 바뀔 때마다 useEffect 내의 코드가 실행돼요. 마지막으로, 카페를 떠날 때 기분이 조금 쓸쓸해지는 것처럼, 컴포넌트가 언마운트 될 때 정리(cleanup) 작업을 수행할 수 있어요.

 

---

🖥️ useEffect의 사용 방법

useEffect는 두 개의 인자를 받아요: 효과를 수행하는 함수와 의존성 배열(dependency array)이죠. 의존성 배열은 선택적으로 제공될 수 있으며, 이 배열 안의 값이 변경될 때만 효과 함수가 실행돼요.

1. useEffect 훅의 기본 형태

• useEffect 훅은 다음과 같은 기본 형태를 가집니다:
  • 첫 번째 인자는 부수 효과를 수행할 함수예요.
  • 두 번째 인자는 의존성 배열로, 이 배열 안의 값이 변경될 때만 효과 함수가 실행돼요.

useEffect(() => {
  // 여기에 부수 효과를 수행할 코드를 작성합니다.
}, [/* 의존성 배열 */]);

2. 컴포넌트가 마운트 되었을 때

• 컴포넌트가 마운트 될 때만 실행되어야 하는 코드는 의존성 배열을 비워서 구현할 수 있어요.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');
}, []); // 의존성 배열이 비어 있기 때문에 컴포넌트가 마운트 될 때 한 번만 실행됩니다.

이 코드는 컴포넌트가 화면에 처음 렌더링 될 때 한 번만 "컴포넌트가 마운트 되었습니다."를 콘솔에 출력합니다.

3. 컴포넌트가 업데이트 될 때

• 특정 상태 변수나 prop이 변경될 때마다 실행되어야 하는 코드는 해당 변수나 prop을 의존성 배열에 포함시켜 구현해요.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(`count가 업데이트되어 ${count}가 되었습니다.`);
}, [count]); // count가 변경될 때마다 실행됩니다.

이 코드는 'count' 상태 변수가 변경될 때마다 콘솔에 그 값을 출력합니다.

4. 컴포넌트가 언마운트 될 때

• 컴포넌트가 언마운트 될 때 실행되어야 하는 정리(cleanup) 작업은 useEffect의 함수에서 클린업 함수를 반환하여 구현해요.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');

  return () => {
    console.log('컴포넌트가 언마운트되었습니다.');
  };
}, []);

이 코드는 컴포넌트가 마운트 될 때 "컴포넌트가 마운트 되었습니다."를 출력하고, 컴포넌트가 언마운트 될 때 "컴포넌트가 언마운트되었습니다."를 출력합니다.

 

---

🤔 useEffect의 사용 예시

useEffect 훅은 리액트에서 부수 효과(side effects)를 처리하기 위해 사용돼요. 주로 데이터 fetching, 구독(subscriptions) 설정 또는 수동으로 DOM을 변경하는 작업에 사용해요. 이 훅을 통해 함수형 컴포넌트 내에서도 생명주기 메서드와 유사한 작업을 수행할 수 있어요.

1. 데이터 가져오기

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []); // 의존성 배열이 비어 있으므로, 컴포넌트가 마운트 될 때 한 번만 실행됩니다.

이 코드는 컴포넌트가 마운트 될 때 외부 API로부터 데이터를 가져와 콘솔에 출력합니다.
의존성 배열이 비어 있기 때문에, 이 효과는 컴포넌트가 처음 렌더링 될 때 한 번만 실행됩니다.

2. 이벤트 리스너 추가 및 제거

useEffect(() => {
  const handleResize = () => {
    console.log('window 크기가 변경되었습니다.');
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 의존성 배열이 비어 있으므로, 컴포넌트가 마운트 될 때 한 번만 실행됩니다.

이 코드는 컴포넌트가 마운트 될 때 윈도우의 크기 변경 이벤트에 리스너를 추가하고, 컴포넌트가 언마운트 될 때 리스너를 제거합니다.
이는 메모리 누수를 방지하고 성능을 최적화하는 데 도움이 됩니다.

3. 사용자 인터랙션에 따른 상태 업데이트

function ClickCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handleClick = () => setCount(prevCount => prevCount + 1);
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return <div>클릭 횟수: {count}</div>;
}

이 코드는 문서 전체에 클릭 이벤트 리스너를 추가하여, 사용자가 어디든 클릭할 때마다 카운트를 증가시킵니다.
이벤트 리스너는 컴포넌트가 마운트 될 때 추가되고, 언마운트 될 때 제거됩니다.
이 방식을 통해 사용자 인터랙션에 기반한 상태 업데이트 로직을 구현할 수 있습니다.

 

---

🚨 주의할 점

• 클린업 함수: useEffect 내부에서 구독을 생성하는 경우, 메모리 누수를 방지하기 위해 컴포넌트가 언마운트 될 때 구독을 정리(cleanup) 해야 해요. 이를 위해 useEffect의 효과 함수에서 클린업 함수를 반환할 수 있어요.
• 의존성 배열: 의존성 배열을 올바르게 관리하지 않으면 예상치 못한 무한 루프에 빠질 수 있어요. 효과가 의존하는 모든 값은 의존성 배열에 포함되어야 해요.

 

---

📖 결론

useEffect 훅은 리액트에서 부수 효과를 관리하는 강력한 방법을 제공해요. 적절히 사용한다면, 데이터 fetching, 구독 설정, DOM 조작 등 다양한 작업을 효과적으로 수행할 수 있어요. 하지만, 의존성 배열의 관리와 클린업 함수의 사용에 주의를 기울여야 해요.

 

---

🔗 추가 정보

• 리액트의 useEffect에 대한 더 깊은 이해를 원하신다면, 리액트 공식 문서에서 자세한 정보를 찾아볼 수 있어요.