React Hooks 설명: useEffect( )(API 기반 앱 구축)

원본 인터랙티브 게시물 링크 => https://webbrainsmedia.com/blogs/react-hooks-explained-useEffect-hook

이전 글에서 useState 리액트 훅에 대해 이야기했습니다. 이 기사에서는 useEffect 후크에 대해 설명합니다. 이 세 가지 유명한 React 클래스 수명 주기 메서드 => componentDidMount , componentDidUpdate 및 componentWillUnmount 의 결합된 기능을 제공합니다. 이제 코로나바이러스 추적기 애플리케이션을 구축하여 이 강력한 후크를 탐색해 보겠습니다.

코로나 바이러스 추적기 앱

기본 React 기능 구성 요소를 먼저 정의하는 것으로 시작하겠습니다.

import React from 'react';

export const CoronaApp = () => {
  const renderButtons = () => {
    return (
      <div>
        <button style={{ margin: '5px' }}>Worldwide</button>
        <button style={{ margin: '5px' }}>USA</button>
        <button style={{ margin: '5px' }}>India</button>
        <button style={{ margin: '5px' }}>China</button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
    </div>
  );
};

이제 두 가지 상태를 정의해 봅시다 =>

데이터: API에서 가져온 추적 데이터를 저장하기 위해

region: 현재 지역

을 저장합니다.

import React, { useState } from 'react';

export const CoronaApp = () => {
  const [data, setData] = useState({});
  const [region, setRegion] = useState('all');

  const renderButtons = () => {
    return (
      <div>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('all');
          }}
        >
          Worldwide
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('usa');
          }}
        >
          USA
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('india');
          }}
        >
          India
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('china');
          }}
        >
          China
        </button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
      <h4 style={{ marginTop: '10px' }}>{region.toUpperCase()}</h4>
    </div>
  );
};

이제 axios를 사용하여 useEffect 후크 내부의 API에서 데이터를 가져옵니다. 하지만 그 전에 먼저 useEffect 의 기본 사용법을 살펴보겠습니다.
useEffect 후크를 사용하는 가장 기본적인 방법은 다음과 같이 단일 함수를 인수로 전달하는 것입니다 =>

useEffect(() => {
  console.log('I will run on every render');
});

이와 같이 useEffect를 정의하면 이 후크가 componentDidUpdate 수명 주기 방법처럼 동작하게 만들어 기능 구성 요소의 모든 단일 렌더링에서 실행됩니다.
useEffect가 componentDidMount처럼 동작하도록 만들려면 기능 구성 요소의 첫 번째 렌더링에서만 실행되도록 합니다. 다음과 같이 useEffect 후크의 두 번째 인수로 빈 배열을 전달해야 합니다 =>

useEffect(() => {
  console.log('I will run only on first render');
}, []);

배열에 값을 전달할 수도 있습니다. 이렇게 하면 전달된 값의 상태에 따라 useEffect 후크의 실행에 의존하게 됩니다. 코로나 추적기 앱의 예를 들면 useEffect의 값이 변경될 때만 region가 실행되기를 원합니다. 따라서 우리는 useEffect 후크를 다음과 같이 정의합니다 =>

useEffect(() => {
  // Data fetching from the API
}, [region]);

괜찮아! 이제 추적기 앱으로 돌아가서 useEffect 후크를 사용하여 API에서 데이터를 가져오겠습니다.

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

export const CoronaApp = () => {
  const [data, setData] = useState({});
  const [region, setRegion] = useState('all');

  useEffect(() => {
    axios
      .get(
        region === 'all'
          ? `https://corona.lmao.ninja/v2/${region}`
          : `https://corona.lmao.ninja/v2/countries/${region}`
      )
      .then((res) => {
        setData(res.data);
      });
  }, [region]);

  const renderButtons = () => {
    return (
      <div>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('all');
          }}
        >
          Worldwide
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('usa');
          }}
        >
          USA
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('india');
          }}
        >
          India
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('china');
          }}
        >
          China
        </button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
      <h4 style={{ marginTop: '10px' }}>{region.toUpperCase()}</h4>
      <ul>
        {Object.keys(data).map((key, i) => {
          return (
            <li key={i}>
              {key} : {typeof data[key] !== 'object' ? data[key] : ''}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

정보 축소 버튼도 Quickly에 추가해 보겠습니다.

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

export const CoronaApp = () => {
  const [data, setData] = useState({});
  const [region, setRegion] = useState('all');
  const [inDetail, setInDetail] = useState(false);

  const dataLen = Object.keys(data).length;

  useEffect(() => {
    axios
      .get(
        region === 'all'
          ? `https://corona.lmao.ninja/v2/${region}`
          : `https://corona.lmao.ninja/v2/countries/${region}`
      )
      .then((res) => {
        setData(res.data);
      });
  }, [region]);

  const renderButtons = () => {
    return (
      <div>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('all');
          }}
        >
          Worldwide
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('usa');
          }}
        >
          USA
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('india');
          }}
        >
          India
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setRegion('china');
          }}
        >
          China
        </button>
        <button
          style={{ margin: '5px' }}
          onClick={() => {
            setInDetail(!inDetail);
          }}
        >
          {inDetail ? 'Show Less' : 'Show More'}
        </button>
      </div>
    );
  };

  return (
    <div>
      <h2>Corona Tracker</h2>
      {renderButtons()}
      <h4 style={{ marginTop: '10px' }}>{region.toUpperCase()}</h4>
      <ul>
        {Object.keys(data).map((key, i) => {
          return (
            <span key={i}>
              {i < (!inDetail ? 10 : dataLen) ? (
                <li key={i}>
                  {key} : {typeof data[key] !== 'object' ? data[key] : ''}
                </li>
              ) : (
                ''
              )}
            </span>
          );
        })}
      </ul>
    </div>
  );
};

이제 developer console를 열고 network 탭으로 이동하면 '적게 보기/더 보기' 버튼을 클릭할 때 useEffect가 실행되지 않는 것을 알 수 있습니다. 국가 버튼을 클릭하여 region 값을 변경할 때만 실행됩니다. 이는 region 후크의 두 번째 인수로 배열의 useEffect 값을 전달했기 때문에 발생합니다. 배열에서 region를 제거하면 처음에만 실행되고 배열을 제거하면 모든 상태 변경 이벤트에서 매번 실행됩니다.

useEffect 정리

React를 사용했다면 콘솔에 표시되는 이 경고에 익숙해야 합니다.

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 후크 내부에서 정리를 실행할 수 있습니다.

정리를 수행하려면 다음과 같이 useEffect 후크의 메서드 내에서 함수를 반환하기만 하면 됩니다. =>

useEffect(() => {
  console.log('Doing some task like subscribing to a service');

  return () => {
    console.log('Cleaning up like unsubscribing to a service');
  };
});

콘솔을 관찰하면 다음과 같은 실행 패턴을 볼 수 있습니다 =>

산출:

useEffect 후크의 첫 번째 실행을 건너뛰고 useEffect의 작업 전에 정리가 실행되는 것을 볼 수 있습니다. 구성 요소가 마운트 해제될 때도 정리가 실행됩니다.

이상입니다. useEffect 후크에 대해 알아야 할 전부입니다. 내 기사가 마음에 들면 좋아요, 댓글 및 공유를 고려하십시오.

건배 🍻!!

원본 인터랙티브 게시물 링크 => https://webbrainsmedia.com/blogs/react-hooks-explained-useEffect-hook