Synchronizing w/ Effects #

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    // Effect는 commit 이후에 실행됩니다.
    // 컴포넌트가 렌더링될 때마다 useEffect 함수가 호출되면서 기능은 동일하지만 새로운 Effect가 등록됩니다.
  });
  return <div />;
}

useEffect(() => {
  // 첫 렌더링(mount) + 이후 리렌더링(commit)이 끝날 때마다 한번씩
});

useEffect(() => {
  // dependency가 없으므로 첫 렌더링(mount)이 끝났을 때만 한번
}, []);

useEffect(() => {
  // 첫 렌더링(mount) + 이후 리렌더링하면서 직전 snapshot의 dependency state들 중 하나라도 변한 경우 한번
}, [a, b]);

import { useState, useEffect } from "react";
import { createConnection } from "./chat.js";

export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []);
  return <h1>Welcome to the chat!</h1>;
}

/*
컴포넌트가 mount될 때 한번 connection(setup)이 일어나고,
컴포넌트가 unmount될 때 disconnect(cleanup)가 일어나고,
컴포넌트가 re-mount될 때 다시 connection(setup)이 일어납니다.

보통 React는 dev환경에서 Strict Mode를 적용하여 컴포넌트가 한번 mount되면
unmount한 뒤에 다시 mount를 수행합니다(prod에서는 한번만 mount). 

re-mount를 수행하면 unmount 이후, mount를 수행했을 때
Effect가 적절하게 cleanup된 뒤에 다시 정상적으로 수행되는지 여부를 확인할 수 있습니다!

따라서, re-mount를 거쳐도 앱이 정상적으로 동작하도록 개발해야 합니다.
*/

useEffect(() => {
  function handleScroll(e) {
    console.log(e.clientX, e.clientY);
  }
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

useEffect(() => {
  const node = ref.current;
  node.style.opacity = 1; // Trigger the animation
  return () => {
    node.style.opacity = 0; // Reset to the initial value
  };
}, []);

useEffect(() => {
  let ignore = false;

  async function startFetching() {
    const json = await fetchTodos(userId);
    if (!ignore) {
      setTodos(json);
    }
  }

  startFetching();

  return () => {
    ignore = true;
  };
}, [userId]);