[react] useEffect Hook + 예제

useEffect의 탄생 배경

---

useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 수행하도록 설정할 수 있습니다. 

 

기존 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 메서드를 사용하여 컴포넌트 생명주기에 따른 작업을 처리했었습니다.

 

그러나 useEffect는 함수형 컴포넌트에서도 동일한 작업을 처리할 수 있게 해주는 것이 특징입니다.

 

useEffect를 사용하면 아래와 같은 작업을 할 수 있습니다.

• API 호출
• DOM 조작
• 이벤트 리스너 등록 및 해제
• 타이머 설정 및 해제
• 외부 라이브러리 로딩

 

useEffect Hook

---

useEffect의 첫 번째 파라미터에는 함수, 두 번째 파라미터에는 의존성이 있는 배열을 넣습니다. 

 

1. 두 번째 파라미터 값이 빈 배열인 경우

---

컴포넌트가 처음 나타날 때에만 useEffect에 등록한 함수가 호출됩니다.

useEffect에서는 함수를 반환할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect에 대한 뒷정리를 해준다고 이해하면 되는데, 두 번째 파라미터가 빈 배열인 경우에 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다.

useEffect(() => {
  console.log('컴포넌트가 화면에 나타남');
  // cleanup 함수
  return () => {
    console.log('컴포넌트가 화면에서 사라짐');
  };
}, []);

 

2. 두 번째 파라미터에 특정 값이 있는 경우

---

컴포넌트가 처음 마운트 될 때와 배열 내에 포함된 값이 변경되었을 때만 useEffect가 호출됩니다.

따라서 불필요한 렌더링을 방지하고 성능을 향상하는 데 도움이 됩니다. 

 

아래 링크에서 코드를 확인해 볼 수 있습니다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`count is ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default IncrementFunc;

 

3. 두 번째 파라미터를 생략한 경우

---

컴포넌트가 리렌더링될 때마다 호출됩니다.

 

 

참고자료

---

• 벨로퍼트, useEffect

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖