useEffect

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

export default function FriendStatus(props) {

  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title - `You clicked ${count} times`;
  })

  const [isOnline, setIsOnline] = useState(null); // state와 effect 또한 여러 번 사용가능하다.

  useEffect(() => {
    // useEffect) 리액트에게 해당 component가 렌더링 이후 어떤 일을 수행해야 하는 지 말해줌
    // 리액트는 이 함수를 기억했다가 DOM 업데이트 이후 불러낸다.
    // 즉 최초의 렌더링 이후 실행되는 이후 모든 업데이트에서 사용되는 함수
    // 리액트는 effect가 수행되는 시점에 이미 DOM이 업데이트 됐음을 보장한다.
    // 즉 순서로 따지면 DOM업데이트 - effect
    // class component의 생명주기 메소드 - componentDidMount, componentDidUpdate, componentWillUnmount 가 합쳐진 개념
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return function cleanUp() { // 정리가 필요한 경우 반환되는 함수 -> 유명(named)함수일 필요 없고 화살표 함수여도 됨
      // 정리가 필요없는 경우 어떤 것도 반환하지 않는다.
      // effect의 정리(clean-up)가 class 에서의 componentDidUpdate 및 componentWillUnmount와의 중복을 피하고,
      // 관련 있는 코드들을 한 곳에 모이게 하며 버그를 줄일 수 있게 도와줌 -> class component에서는 분기를 하기에 할 수 없던 일
      ChatAPI.unSubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
    // 이처럼 effect hook은 두 가지 경우를 한 개의 API로 통합한다
  }, [props.friend.id]); // 선택적 인수인 두 번째 인수에 배열을 넣어, props.friend.id가 바뀔 때만 재구독한다

  if (isOnline === null) {
    return "Loading...";
  }

  return isOnline ? "Online" : "Offline";
}