에러발생

리액트를 이용하여 모달 컴포넌트를 개발 하던중 다음과 같은 에러가 발생하였다.

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다.
해당 작업은 수행되지 않지만 메모리 누수가 발생된다.
해결방법으로 useEffect의 cleanup function을 이용해라

콘솔창에 빨간글씨로 경고 메세지가 나오면 항상 😡짜증이 나지만 친절하게 에러 메세지 속에는 해결방법을 알려준다.

해당 에러가 발생한 상황은 비동기 작업을 처리하는 과정에서 발생하였다. 비동기 작업을 수행하기 전에 loading이라는 상태변수를 true로 변경하여 현재 로딩중이라는 모습을 보여주었고 비동기 작업이 완료된 경우 모달 컴포넌트가 사라지고 loading이라는 상태변수를 false로 변경하였다. 이 과정에서 위와 같은 에러가 발생하였다. 모달 컴포넌트가 사라진 이후였기 떄문에 loading 상태변수를 관리하던 컴포넌트가 사라졌기 때문에 상태변수를 업데이트 할 수 없다는 에러였다. 물론 컴포넌트가 사라지면 해당 컴포넌트가 관리하던 모든 상태변수는 처음으로 돌아가기 때문에 loading이라는 상태변수를 false로 굳이 변경하지 않아도 되기 때문에 상태변수를 false로 바꾸지 않아도 되지만 false로 바꾸고 싶은 경우 어떻게 해야하는지 알고 싶었다.

에러코드

에러가 발생한 상황을 간략한 코드로 작성해 보았다.

App.js

import React, { useState } from "react";
import "./App.css";
import Modal from "./Modal";

const App = () => {
  const [visible, setVisible] = useState(false);

  const onClick = () => {
    setVisible(true);
  };

  return (
    <div className="App-container">
      {visible && <Modal setVisible={setVisible} />}
      <button className="App-modal-button" onClick={onClick}>
        모달
      </button>
    </div>
  );
};

export default App;

Modal.js

import React, { useState, useEffect } from "react";
import "./Modal.css";

const Modal = ({ setVisible }) => {
  const [loading, setLoading] = useState(false);

  const threeSecods = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("success");
      }, 3000);
    });
  };

  const onClick = () => {
    setLoading(true);
    threeSecods()
      .then(res => {
        if (res === "success") {
          setVisible(false);
        }
      })
      .then(() => setLoading(false));
  };

  return (
    <div className="modal-back">
      <div className="modal-container">
        {loading && <span>Loading...</span>}
        <button className="modal-close" onClick={onClick}>
          닫기
        </button>
      </div>
    </div>
  );
};

export default Modal;

해결방법

1) 가장 간단한 해결방법으로는 모달 컴포넌트가 사라지는 시점 이전에 loading이라는 변수를 false로 변경하고 모달 컴포넌트를 사라지게 하는 것이다.

const onClick = () => {
  setLoading(true);
  threeSecods().then(res => {
    if (res === "success") {
      setLoading(false); // 로딩 상태변수 변경
      setVisible(false); // 모달 컴포넌트 종료
    }
  });
};

2) 다음 방법으로는 콘솔창에서 알려준 방법으로 useEffect의 cleanup function을 이용하는 것이다.

const onClick = () => {
  setLoading(true);
  threeSecods().then(res => {
    if (res === "success") {
      setVisible(false);
    }
  });
};

useEffect(() => {
  return () => setLoading(false); // cleanup function을 이용
}, []);

결론

어떻게 생각하면 간단한 오류지만 컴포넌트 상태값을 처리하는 과정에서 누구든지 쉽게 발생할 수 있는 에러라고 생각하였다.