[TIL] Day64 #Virtual DOM #UseMemo #UseCallback

2022.07.27(Wed)

[TIL] Day64
[SEB FE] Day65

🧩  DOM

: Document Object Model(문서 객체 모델). 브라우저가 트리 구조로 만든 모델

✨ 문서 객체란?
: JS와 같은 스크립팅 언어가 태그들에 접근하고 조작할 수 있도록 브라우저가 태그들을 트리 구조로 객체화 시킨 것을 의미!

🌵 트리는 저장된 데이터를 더 효과적으로 탐색하기 위해 사용 ⇒ 빠른 자료 탐색 성능이 장점인 자료구조

👉 트리 구조로 된 DOM은 JS와 같은 스크립팅 언어가 접근하고 탐색하는 속도가 빠르므로 변경 / 업데이트 속도 또한 빠름

✨ DOM이 변경 & 업데이트된다 = 브라우저의 렌더링 엔진이 Reflow한다!

👉 JS로 조작하는 DOM의 요소가 많을수록 모든 DOM 업데이트에 대해 리플로우를 해야 하므로 DOM 업데이트에 대한 비용이 많이 들게 됨

☑️ Virtual DOM

🫥 like Real DOM의 가벼운 사본 느낌 ?

• 추상화된 JS 객체 형태를 가지고 있음

• 실제 DOM과 마찬가지로 HTML 문서 객체 기반!

• 실제 DOM 객체에 접근하여 조작하는 것이 아니라 Virtual DOM에 접근하여 바뀐 부분만 적용!

  ✋ 실제 DOM 객체처럼 화면 내용을 직접 변경 ❌ → 훨씬 속도 Fast!
  

• 가상 UI 요소를 메모리에 유지 → 이를 라이브러리를 통해 실제 DOM과 동기화시킴
• Virtual DOM Tree의 이전 & 현재 버전 간의 차이 계산 → 부분적으로 리렌더링
  → 업데이트된 트리는 실제 DOM으로 한번에 업데이트!

---

☑️ React Diffing Algorithm (비교 알고리즘)

✨ 가정

1. 서로 다른 두 요소는 다른 트리를 구축할 것
2. key 프로퍼티를 가지고 여러번 렌더링을 거쳐도 변경되면 안 되는 자식 요소가 무엇인지 알아낼 수 있음

• React는 기존과 새롭게 변경된 Virtual DOM Tree를 비교할 때, 트리의 Level 순서대로 순회하는 방식으로 탐색
  👉 같은 Level(위치)끼리 비교! (BFS; 너비우선탐색)
  → 같은 Level에 위치한 노드 파악 후, 다음 자식 세대의 노드를 순차적으로 파악!

✨ 다른 타입의 DOM Element인 경우

• DOM Tree는 부모와 자식 간의 태그가 한정적이라 부모 태그가 달라진다면
  React는 이전 트리를 버리고, 새로운 트리를 구축! → 이전 DOM 노드들은 전부 파괴
• New 컴포넌트 실행 → 기존 컴포넌트 완전히 해제(Unmount) → 기존 state 파괴

✨  같은 타입의 DOM Element인 경우

• 타입이 바뀌지 않으면 React는 최대한 렌더링 하지 않는 방향으로 최소한의 변경 사항만 업데이트
• 업데이트 할 내용이 생기면 virtual DOM 내부 프로퍼티만 수정 후,
  모든 노드의 업데이트가 끝나면 단 한번만! 실제 DOM으로의 렌더링 시도
• 헤당 DOM 노드 처리 후, 이어서 해당 노드의 자식들을 순차적으로 순회하면서 차이가 발견될 때마다 변경
  ⇒ 재귀적으로 처리!!

👿 React는 위 → 아래로 순차적으로 비교하므로, List 처음 부분에 엘리먼트 삽입시 이전의 코드에 비해 훨씬 나쁜 성능을 냄

<ul>
  <li>first</li>
  <li>second</li>
</ul>

// 자식 엘리먼트의 끝에 새로운 자식 엘리먼트를 추가 -> Good
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

// 자식 엘리먼트를 처음에 추가 -> Bad
// 자식 노드가 서로 다르다고 인지 -> 리스트 전체가 바뀌었다고 생각함
// => 새롭게 렌더링해버림 -> 비효율적인 동작 방식!
<ul>
	<li>third</li>
  <li>first</li>
  <li>second</li>
</ul>

👉 위의 문제를 해결하기 위해 key 속성 지원 → 효율적으로 가상 DOM 조작 가능

📎 Key

• 자식 노드들이 key를 갖고 있다면, React는 그 key를 이용해 기존 & 새로운 트리의 자식이 일치하는지 확인 가능
  • key 속성에는 유일한 값(ex. Id) 부여 해주기!
  • 전역적으로 유일할 필요는 ❌, 형제 element 사이에서만 유일하면 됨!

🫧 복잡도가 커질수록⬆️ 시간이 오래 걸림
🫧 너비우선탐색(BFS): 가까운 지점부터 탐색하며, 멀리 있는 지점은 나중에 탐색

---

☑️ React Hooks

📎 Class Component

 👎 컴포넌트 사이에서 상태 로직 재사용 어렵

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
        this.handleIncrease = this.handleIncrease.bind(this);
    }

    handleIncrease = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }

    render(){
       return (
            <div>
                <p>You clicked {this.state.counter} times</p>
                <button onClick={this.handleIncrease}>
                    Click me
                </button>
            </div>
       ) 
    }
}

📎 Function Component

 👍 클래스형 컴포넌트에 비해 훨씬 더 직관적이고, 보기 쉬움

// useState() Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가한 형태
// 이 state는 컴포넌트가 리렌더링 되어도 그대로 유지됨

function Counter () {
    const [counter, setCounter] = useState(0); // 컴포넌트 리렌더링되어도 state는 그대로 유지

    const handleIncrease = () => {
        setCounter(counter + 1)
    }

    return (
        <div>
            <p>You clicked {counter} times</p>
            <button onClick={handleIncrease}>
                Click me
            </button>
        </div>
    )
}

📎 Hook

: 함수형 컴포넌트에서 상태값 등의 여러 기능 사용을 편리하게 해주는 메소드 (클래스형 컴포넌트에선 동작 ❌)

✨ Hook 사용 규칙

1. React 함수 최상위에서만 호출해야 함
2. 오직 React 함수 내에서만 사용되어야 함
   • 함수형 컴포넌트나 Custom Hook이 아닌 일반 JS 함수 안에서 호출해선 ❌

---

✨ 컴포넌트는 보통 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링하는 구조로 이루어져 있음

✨ 렌더링 최적화를 위한 Hook: useCallback, useMemo

☑️ UseMemo

: 특정 값(value)를 재사용하고자 할 때 사용하는 Hook

import { useMemo } from "react";

function Calculator({value}){
	// const result = calculate(value);
  const result = useMemo(() => calculate(value), [value]);

	return (
		<>
			<div>
				{result}
			</div>
		</>
	)
}

// add.js
export const add = (num1, num2) => {
  console.log("숫자가 들어옵니다.");
  return Number(num1) + Number(num2);
};

// -------------------------------------------

// App.js
const [name, setName] = useState("");
const [val1, setVal1] = useState(0);
const [val2, setVal2] = useState(0);

// name이 변경될 때도 add() 호출
const answer = add(val1, val2);

// useMemo()를 이용하여 val1, val2 값이 바뀔때만 add()가 호출되도록 변경!
const answer = useMemo(() => add(val1, val2), [val1, val2]);

• 이전 렌더링과 새로운 렌더링을 비교해 value값이 같은 경우엔 이전 value값을 그대로 재활용
  ⇒ Memoization 개념과 관계!
  👉 복잡한 연산 중복을 피하고, React 앱의 성능을 최적화시킴
  

📎 Memoization

: 기존에 수행한 연산의 결과값을 메모리에 저장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
👉 중복 연산을 할 필요가 없기 때문에 앱 성능 최적화!

---

☑️ UseCallback

: Memoization 기법을 이용한 Hook으로, 함수의 재사용을 위해 사용하는 Hook

• 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환

import React, { useCallback } from "react";

function Calculator({x, y}){
	// const add = () => x + y;
	const add = useCallback(() => x + y, [x, y]);

	return (
		<>
			<div>
				{add()}
			</div>
		</>
	)
}

// List.js
function List({ getItems }) {
  const [items, setItems] = useState([]);

  useEffect(() => {
    console.log("아이템을 가져옵니다.");
    setItems(getItems());
  }, [getItems]);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

// -------------------------------------------

// App.js
const [input, setInput] = useState(1);
const [light, setLight] = useState(true);

// input에 숫자 변경 외에도 다크모드 버튼 클릭시에도 동작
const getItems = () => {
	return [input + 10, input + 100];
};

// useCallback()를 이용하여 input 값이 바뀔때만 setItems() 호출되도록 변경!
const getItems = useCallback(() => [input + 10, input + 100], [input]);

👍 자식 컴포넌트의 props로 함수를 전달해줄 때 useCallback을 사용하기 좋음

📎 참조 동등성

✨ useCallback은 참조 동등성에 의존

• 객체는 메모리에 값이 아닌 값의 주소를 저장하므로, 반환 값이 같아도 일치연산자 비교시 false 출력
• 2개의 함수는 동일 코드를 공유하더라도 메모리 주소가 다르기 때문에, 참조 비교 시 다른 함수로 간주!

• React는 리렌더링 시 함수를 새로 만들어서 호출
• 새로 만들어 호출된 함수는 기존 함수와 같은 함수 ❌
• useCallback을 이용해 함수 자체를 저장한 후, 다시 사용
  = 함수의 메모리 주소 값을 저장했다가 다시 사용
  👉 React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때, 예상치 못한 성능 문제를 막을 수 있음