[React] virtual DOM, React Diffing

🧩 Virtual DOM

• 리엑트에는 버츄얼돔이라는 가상의 dom객체가 있음
• 실제 dom을 조작하는 대신 버츄얼돔에 접근해서 적용함
• Real DOM : 브라우저가 html문서를 조작할 수 있도록 트리구조화한 객체모델
• querySelector, addEventListener 같은 dom api로 문서요소를 조작할 수 있었다.
• Virtual DOM: DOM에서 바뀐 부분만 비교해서 그부분만 렌더링하는 기술

🧩 React Diffing Algorithm

• 리액트 입장에서는 변경된 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 알고리즘인 휴리스틱 알고리즘(시간복잡표 O(n))
• BFS의 일종, 동일선상의 노드를 파악하고 밑으로 파악해나가는 방식

🧩 React Hook

• Hook : 함수 컴포넌트에서 사용하는 메소드, 대표적으로 useState()가 있음.
• Hook 사용규칙
  • 리액트 함수의 최상위에서만 호출해야 한다 : 반복문 조건문 등에서 실행하면 잘작동안함
  • 오직 리액트 함수 내에서만 사용되어야 한다 : js함수내에서 리액트 hook 안돌아감

🚩 useMemo

• 특정 값을 재사용하고자 할때 사용하는 Hook

function Calculator({value}){

	const result = calculate(value);

	return <>
      <div>
					{result}
      </div>
  </>;
}

props로 넘어온 value를 calculate함수에 넘겨서 result구하고 출력하는 컴포넌트
여기서 calculate함수가 복잡한연산을 한다면 렌더링이 길어짐

/* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */
import { useMemo } from "react";

function Calculator({value}){

	const result = useMemo(() => calculate(value), [value]);

	return <>
      <div>
					{result}
      </div>
  </>;
}

• useMemo에 calculate감싸주면 value값이 동일한경우에는 이전 렌더링 value값을 그대로 씀
• useMemo는 값의 재사용 useCallback은 함수의 재사용을 위한 hook

🚩 Custom Hooks

• 개발자가 스스로 커스텀한 훅

• 여러 url을 fetch할때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일함수에서 작동케하고 싶을 때 사용함

• 이런 컴포넌트가 있다고 치자

//FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트
function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

//FriendListItem : 친구가 online일 때 초록색으로 표시하는 컴포넌트
function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

• friendstatus, friendlistitem컴포넌트 둘다 같은로직을 쓰는 부분이 있다.
• 그 로직을 커스텀훅 useFriendStatus로 만들어보자

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

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

  return isOnline;
}

• 규칙
  • 이름앞에 use붙여야함
  • 프로젝트 내의 hooks디렉토리에 custom hook을 위치시켜야함
  • 리턴하는 값은 조건부여서는 안됨.
• 위의 커스텀훅을 적용해보자

🧩 React 18 기능

• 리액트 18은 더이상 ReactDOM.render을 지원하지 않음