useEffect란? 그리고 return의 역할은?

본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

---

1. 개 요

오늘은 면접을 보면서 받았던 질문으로 useEffect에서 return의 역할은 무엇인지에 대해 공부를 하며,
useEffect Hook에 대해 공식 문서와 서적을 통해 다시 한번 알아보고 공부한 내용을 기록해 보고자 한다.

 

2. useEffect 란?

• useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook으로
  주로 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate의 역할을 대신한다.
• useEffect는 매개변수로 CallBack함수와 배열(Array) 2개를 받는다.
• 기본적으로 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 한번 실행된다. (※ componentDidMount의 역할과 같다.)
• 주로 마운트 시에 하는 작업들
  • props 로 받은 값을 컴포넌트의 로컬 상태로 설정
  • 외부 API 요청 (REST API 등)
  • 라이브러리 사용 (D3, Video.js 등...)
  • setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약
• 두번째 매개변수에 state가 있다면 값이 바뀔때마다 랜더 후 호출된다. (※ componentDidUpdate의 역할과 같다.)

 

3. useEffect 에서 return이란?

• useEffect에서 함수를 반환(return) 하는 것은 cleanup 함수라고 부르며, 두번째 매개변수인 배열(Array)가 비어있을 경우
  삭제 버튼 클릭과 같은 이벤트 작업으로 컴포넌트가 사라질 때 cleanup 함수가 호출된다.
• 언마운트 시에 하는 작업들
  • setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
  • 라이브러리 인스턴스 제거

 

4. useEffect 사용 예제

• 컴포넌트가 마운트될 때 실행

import { useEffect } from "react";
// 생략...
useEffect(() => {
    console.log("마운트될 때만 실행!");
  }, []);

 

• 특정 값(State)이 업데이트될 때 실행

// 생략...

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

  useEffect(() => {
    console.log(`특정 값이 업데이트될 때 실행!(count: ${count})`);
  }, [count]);

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

 

• 컴포넌트가 언마운트될 때 실행 (cleanup 함수 확인)

// 생략...

function HabitList() {
  const [habits, setHabits] = useState([
    {id: 1, content: "첫번째 습관"},
    {id: 2, content: "두번째 습관"},
    {id: 3, content: "세번째 습관"},
  ]);

  const onRemove = (id) => {
    console.log(id)
    setHabits(habits.filter(habit => habit.id !== id));
  }

  useEffect(() => {
    console.log("mount");
    return () => {
      console.log("cleanup")
    }
  }, [habits]);

  return (
    <div>
      <h1>useEffect</h1>
      <ul>
        {habits.map((habit) => (
          <li key={habit.id}>
            {habit.content}
            <button onClick={() => onRemove(habit.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

 

 

---

참 고

 

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

https://react.vlpt.us/basic/16-useEffect.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook