TIL_ts-react-todolist

✅ ts-react-todolist

🔑 effects란?

React에서 "effects"란 주로 컴포넌트 외부의 시스템에 접근하거나 조작하는 동작을 의미합니다. 이러한 effects는 주로 데이터를 가져오거나 변경하고, DOM을 조작하거나, 이벤트 리스너를 등록/해제하고, 타이머를 설정/해제하는 등의 작업을 포함

useEffect가 하는일은 무엇일까요?
-> useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다.
-> React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다.
Ex) API를 불러내는 일

🔑 React-useEffects

클린업 함수
: side effects는 clean-up이 필요한 것과 필요하지 않을 것으로 나뉨

• 정리(Clean-up)를 이용하지 않는 Effects
• 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요 없는 경우
• count state 변수를 선언한 뒤 React에게 effect를 사용함을 말하고 있습니다. useEffect Hook에 함수를 전달하고 있는데 이 함수가 바로 effect입니다. 이 effect 내부에서 document.title이라는 브라우저 API를 이용하여 문서 타이틀을 지정합니다. 같은 함수 내부에 있기 때문에 최신의 count를 바로 얻을 수 있습니다. 컴포넌트를 렌더링할 때 React는 우리가 이용한 effect를 기억하였다가 DOM을 업데이트한 이후에 실행

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

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

---

정리(clean-up)를 이용하는 Effects

• 정리가 필요한 Effects는 effect가 함수를 반환하면 React는 그 함수를 정리가 필요한 때에 실행 시킨다.

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

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';
}