전문가처럼 React의 useEffect 사용하기

안녕하세요, 이 연습 에서는 전문가처럼 React의 useEffect 기능 을 사용하기 위해 알아야 할 모든 것을 보여드리겠습니다 .

짧은 역사

useEffect 가 있기 전에는 다음 과 같은 수명 주기 메서드가 있었습니다.

componentDidMount
componentDidUpdate
componentWillUnmount

componentDidUpdate(prevProps, prevState) {
  if (prevProps.foo !== this.props.foo) {/* do something */} 
  if (prevState.bar !== this.state.bar)  {/* do something else */}
}

이러한 수명 주기 메서드를 사용하면 구성 요소 상태의 모든 변경 사항을 안정적으로 처리할 수 있습니다. 그렇다면 왜 useEffect 로 변경 할까요 ?

React Stateless 구성 요소 입력

어느 시점(2016년 초로 생각합니다)에서 React 팀은 일반적인 구식 Javascript 기능으로 인스턴스화할 수 있는 React 구성 요소를 만들기로 결정했습니다. 그래서:

import React from "react";
function MyFunc() {
  return <div>Hey!</div>
}

React.useEffect 입력

상태 변경을 관리하는 새로운 접근 방식 은 React 라이브러리에 의해 노출되는 useEffect 함수 의 형태로 제공 됩니다. 그렇다면 우리가 사랑하는 componentDidMount , componentDidUpdate 및 componentWillUnmount 메소드를 어떻게 다시 생성 할까요? 이전의 상태 비저장 기능을 확장해 보겠습니다.

import React from "react";
function MyFunc(props) {
const [bar setBar] = React.useState(null);
  
  React.useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount")
    }
  }, []);
  
  React.useEffect(() => {
    console.log("componentDidUpdate when 'bar' changes");
  }, [bar]);
React.useEffect(() => {
    console.log("componentDidUpdate when 'props.foo' changes");
  }, [props.foo]);
return <div>Hey!</div>
}

이 예제에 추가한 또 하나의 상태 후크인 React.useState는 이 튜토리얼의 범위를 벗어나지만 여기에서 자세히 알아보세요 !

수명 주기 관리를 넘어

구성 요소의 상태와 이전 수명 주기 방법을 모두 관리할 수 있다는 점이 좋습니다. 상태 비저장 함수의 단순성과 재사용성, 그리고 React.useEffect 함수 사이에서 재사용 가능한 상태 저장 함수 또는 더 일반적으로 명명된 사용자 정의 후크 와 같은 새로운 패러다임을 사용할 수 있게 되었습니다 .

당신과 같은 정통한 독자는 useEffect를 사용하면 이전처럼 prevProps 또는 prevState 속성에 액세스할 수 없다는 것을 알아차렸을 것입니다. 두려워하지 마십시오! 여기에 대한 솔루션을 읽으십시오 . 이 솔루션이 작동하는 이유는 React.useRef가 구성 요소의 다시 렌더링을 트리거하지 않기 때문입니다. 또한 종속성이 없는 useEffect는 어떤 상태 변경이 트리거했는지에 관계없이 구성 요소를 다시 렌더링할 때마다 트리거합니다.

안녕하세요 커스텀 후크

React 가 공식 문서 여기에서 공유하는 것보다 커스텀 훅에 대한 더 나은 기본 예제는 없습니다 . 예제의 맨 아래부터 시작하여 위로 이동해 보겠습니다.

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

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

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}