TIL: 2022-11-25

⚙️ 오늘 배운 주제

Virtual DOM, React Hooks, useMemo, useCallback

 

🐹 오늘의 기분

오늘은 하루종일 솔로 일정이었다. 가상 돔은 글로는 이해가 잘 안 돼서 얄코 영상을 조금 더 찾아보았다. useMemo와 useCallback의 사용법은 잘 알겠는데 언제 써야 할 지 스스로 판단할 수 있는 수준은 아니다. Web dev simplified 영상을 보고 좀 더 스스로 공부해봐야겠다. 다음 주에 배울 내용을 보니까 이 Hook도 직접 만들 수 있는 모양이던데, 흥미롭다.

백준 문제 범위가 너무 광범위해서 프로그래머스나 코딜리티를 풀어보려고 한다. 아무래도 백준을 풀다보니 내가 풀 수 있겠는 문제만 골라서 풀게 돼서,, 발전이 더디다는 생각이 들었음. 프로그래머스, 코딜리티 도장깨기 하고! 백준으로 넘어가보자 아자아자

 

🗝 키워드

Virtual DOM, Diffing Algorithm, React Hooks, useMemo, useCallback

 

🗣 스스로에게 설명

Virtual DOM

Real DOM의 가벼운 사본

왜 탄생했는가?

자바스크립트 프레임워크는 1개만 바꿔도 되는 상황에도 나머지 요소까지 다 바꿔서 리플로우한다.

바뀐 부분만 비교해서 거기만 렌더링을 하자라는 개념으로 등장한 것이 Virtual DOM

Virtual DOM

리액트에는 모든 DOM 객체에 대응하는 가상의 DOM 객체가 있음.
가상 DOM 객체는 화면에 표시되는 내용을 실제 DOM 객체처럼 직접 변경하는 것은 아니다.

가상 DOM은 가상의 UI 요소를 메모리에 유지시키고, 그 유지시킨 가상의 UI 요소를 실제 DOM과 동기화시킨다.
상태 변경으로 가상의 DOM 트리가 생성 -> 가상의 DOM과 실제 DOM에 변경을 수행

이 변경을 수행하기 위한 최상의 알고리즘을 구상해야 했다.

Diffing Algorithm

가상의 DOM과 실제 DOM에 변경을 수행할 수 있는 최상의 방법을 계산하는 알고리즘
이 조작 방식의 알고리즘은 O(N^3)로 어마어마하다...

리액트 개발자들은 두 가지 가정 아래에 시간복잡도 O(N)의 새로운 휴리스틱 알고리즘을 구현함

1. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
2. 개발자가 제공하는 key 프로퍼티를 가지고 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있을 것이다.

레벨 순서대로 순회하는 방식, 일종의 bfs

다른 타입의 엘리먼트로 바뀔 경우

DOM 트리 구조는 자식 태그와 부모 태그의 규칙이 정해져있다는 특징이 있음. ex) ul/ol 안에는 무조건 li 태그가 와야 함

이게 다른 타입으로 바뀔 경우에는 기존의 state도 파괴된다.

같은 타입의 엘리먼트일 경우

최대한 렌더링을 하지 않는 방향으로 최소한의 변경 사항만 업데이트한다.
하나의 DOM 노드를 처리한 뒤 뒤이어서 해당 노드들의 자식들을 순회하면서 차이가 발견될 때마다 그것들만 변경한다. (재귀)

key값이 없는 노드는 비효율적으로 동작할 수 있음.
차례대로 순회하기 때문에 리스트의 맨 첫 부분에 값을 넣게 되면 리스트 전체가 다르다고 판단하여 비효율적으로 동작할 가능성이 높아진다.
인덱스를 key의 최후의 수단으로 사용해야 하는 이유도 이 때문임.

---

What is Hook?

함수 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능

뛰어난 재사용성과 직관성을 가짐

함수 컴포넌트에서 사용하는 메소드
클래스 컴포넌트는 복잡해질수록 이해하기 어려워졌음.
함수 컴포넌트는 상태 값을 사용하거나 최적화할 수 있는 기능들이 미진했는데 이를 보완하기 위해 Hook이라는 개념이 등장함

 

Hook은 클래스형 컴포넌트에서는 동작하지 않음

1. Hook은 최상위에서만 호출 - 리액트는 훅을 호출되는 순서대로 저장한다.
2. 리액트 함수 내에서만 사용

useMemo

최적화를 위한 Hook
특정 값을 재사용하고자 할 때 사용하는 Hook
이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 값이 동일할 경우에는 이전 렌더링의 값을 그대로 사용할 수 있게 됨. 메모이제이션 개념과 긴밀한 관계가 있음

useCallback

최적화를 위한 Hook
useMemo와 마찬가지로 메모이제이션 기법을 활용한 Hook
함수의 재사용을 위한 Hook

자식 컴포넌트의 props로 함수를 전달해줄 때 useCallback을 사용하기 좋다.
참조 동등성에 의존한다.

두 개의 함수가 동일한 코드를 공유하더라도 메모리 주소가 다르면 다른 함수로 인식함.
리액트는 리렌더링 시 함수를 새로이 만들어서 호출한다.
useCallback을 이용해 함수 자체를 저장해서 다시 사용하면 주소값을 저장했다가 다시 사용할 수 있음.
예상치 못한 성능 문제를 막을 수 있다.

 

❓ 막히는 or 막혔던 부분

useMemo와 useCallback의 사용 상황

 

🔍 공부가 더 필요한 부분

mount, unmount 등 개념 찾아보기