React useEffect Hook을 사용하는 방법

The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. They can also be just called effects.

The useEffect Hook can be understood as componentDidMount, componentDidUpdate, and componentWillUnmount combined in the React class lifecycle methods.

There are two different types of side effects in React components:

• those that don’t require cleanup, and
• those that do.

Some examples of effects that don’t require a cleanup are network requests, manual DOM mutations, and logging. We can run them and immediately forget about them.

Let's have a look on how class components and function components can handle these type of side effects.

The other type of effects, are effects which require a cleanup. This could be a subscription to some external data source. If we don't clean up after subscribing we would introduce a memory leak in our application.

The React docs also have a great example for this, which I am going to utilize below. Let’s say we have a ChatAPI module that lets us subscribe to a friend’s online status, and we compare using Classes and using Hooks.

In a React Class component , you would typically set up a subscription in componentDidMount , and clean it up in componentWillUnmount .

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange,
    );
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange,
    );
  }
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline,
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}

The lifecycle methods componentDidMount and componentWillUnmount need to mirror each other. Lifecycle methods force us to split this logic even though conceptually code in both of them is related to the same effect.

In a React Function Component with the useEffect Hook the code for adding and removing a subscription is so tightly related that useEffect is designed to keep it together. If your effect returns a function, React will run it when it is time to clean up.

With the useEffect Hook it could be written like this:

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(
      props.friend.id,
      handleStatusChange,
    );
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(
        props.friend.id,
        handleStatusChange,
      );
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other, and they're just part of the same effect.

React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time.

• The Effect Hook lets you perform side effects in function components.
• There are two different types of useEffect hooks, with cleanup and without.