React useEffect

useEffect란? 

• React component가 렌더링 후 어떤 작업을 수행해야 할지를 명시할 때 useEffect을 사용한다. useEffect의 적용은 보통, 마운트(화면에 나타날 때), 언마운트(화면에서 사라질 때), 그리고 업데이트 될 때 사용된다
• 마운트:  
  
  • 외부 API 요청(REST API 등) 
  • props로 받은 값을 component local 상태로 결정
  • 라이브러리 사용(D3, 등)
  • setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약
• 언마운트: (useEffect 내에서 함수 반환을 통해 구현할 수 있으며 이를 clean-up이라 한다!)  
  • clearInterval을 통한 setInterval, setTimeout 등록된 작업을 clear하기
  • 라이브러리 인스턴스 제거

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

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

• 위의 예시를 보면 useEffect첫 번째 인수로 콜백함수가 있음 확인할 수 있다 => 이것이 effect에 해당한다. 

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

• 해당 코드에서는 return 함수를 사용해 누수를 방지하고, 즉 하나의 useEffect(effect) 내에서 구독과 취소를 동시에 관리할 수 있는 것이다! => 모든 경우에 clean-up함수를 작성하는 것은 아니지만, 누수를 방지하는 상황에서는 사용이 권장된다!

---

매개변수

• 위 코드에서 확인했듯이, useEffect hook에서는 첫 번째 매개변수로 콜백함수를 받고, 두 번째의 경우(optional) 배열을 받는다! 이것을 deps이라 한다. 
• deps:
  • deps에 특정값을 넣게 되면 component가 처음 마운트될 때 호출되고, 지정한 값이 변경되면 호출된다, 언마운트시에도 호출된다 

function App() {
  const [input, setInput] = useState("");
  const [count, setCount] = useState(1);
  useEffect(() => {
    console.log("렌더링됨!");
  });
  const handleCount = () => {
    setCount((prenum) => prenum + 1);
  };
  const handleChangeInput = (event) => {
    setInput(event.target.value);
  };
  return (
    <div>
      <button onClick={handleCount}>+</button>
      <span>{count}</span>
      <input type="text" value={input} onChange={handleChangeInput}></input>
      <span className="outcome">{input}</span>
    </div>
  );
}

• 위 코드를 보면, 처음 마운트할 때 그리고 state와 관계없이 state변경을 통한 리-렌더링이 발생할 때마다 effect가 호출되는 것을 확ㅇ니할 수 있다. effect의 코드가 무거워질 수록 해당 작업은 비효출적으로 변하게 된다
• 따라서, deps에 특정한 값을 넣어서 지정한 값에 국한해 effect를 동작하게 하는 것이다. 

import "./App.css";
import { useState, useEffect } from "react";
// import InputSample from "./InputSample";
function App() {
  const [input, setInput] = useState("");
  const [count, setCount] = useState(1);
  useEffect(() => {
    console.log("렌더링됨!");
  }, [count]);
  const handleCount = () => {
    setCount((prenum) => prenum + 1);
  };
  const handleChangeInput = (event) => {
    setInput(event.target.value);
  };
  return (
    <div>
      <button onClick={handleCount}>+</button>
      <span>{count}</span>
      <input type="text" value={input} onChange={handleChangeInput}></input>
      <span className="outcome">{input}</span>
    </div>
  );
}

• 위와 같이 deps에 [count] 값을 넣었을 때 해당 값이 변경하지 않는 이상 리렌더링이 발생하더라도, effect가 호출되지 않음을 확인할 수 있다.
• React Component는 기본적으로 부모 컴포넌트가 리렌더링 될 때마다 자식 컴포넌트 또한 리렌더링 된다(자식에서 변경이 발생하지 않더라도) => 실제로 DOM에는 변경되는 내용만 반영이 되지만, Virtual DOM이 모든 것을 다 리렌더링 하는 것이다 => 최적화하는 과정이 필요함!

---

출처:

https://react.vlpt.us/basic/16-useEffect.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook

https://ko.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Using the Effect Hook – React