useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법

마운트 / 언마운트

import React, { useEffect } from "react";

function User({ user, onRemove, onToggle }) {
  const { username, email, id, active } = user;

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

  return (
    <div>
      <b
        style={{
          color: active ? "green" : "black",
          cursor: "pointer",
        }}
        onClick={() => onToggle(id)}
      >
        {username}
      </b>
      &nbsp;
      <span>{email}</span>
      <button onClick={() => onRemove(id)}>삭제</button>
      {/* 이 버튼이 눌렸을 때 새로운 함수를 만드는데, id가 특정값인 onRemove 함수 실행하는 함수 */}
    </div>
  );
}

export default function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map((user) => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(deps)을 넣는다. 만약 배열을 넣지 않으면, 컴포넌트가 처음 나타날 때만 useEffect 에 등록한 함수가 호출되게 된다.

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. cleanup 함수는 useEffect 에 대한 뒷정리 함수로, deps 가 비어있는 경우 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

마운트 시 하는 작업의 예

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

언마운트 시에 하는 작업의 예

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

deps에 특정값 넣기

deps 에 특정 값을 넣으면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출된다. 언마운트 시에도 마찬 가지로 호출이 되고, 값이 바뀌기 직전에도 호출된다.

  useEffect(() => {
    console.log("user값이 설정됨");
    console.log(user);

    return () => {
      console.log("user값이 바뀌기 전");
      console.log(user);
    };
  }, [user]);

deps를 지정하지 않으면 변경하지 않은 항목까지 모두 리렌더링된다. 실제 DOM에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트지만, Virtual DOM이 모든 걸 렌더링하게 되기 때문에 컴포넌트 최적화를 위해 지정해주도록 한다.

(+ useEffect 더 공부할 것)