Chapter1. Virtual DOM
1.Virtual DOM이 나오게 된 배경에 대해 이해합니다.
2.DOM의 조작 속도가 느려지는 이유와 어떻게 가상 DOM이 더 빠른 지에 대해 이해합니다.
3.Virtual DOM의 형태에 대해 이해합니다.
Chapter1. React Diffing Algorithm
4.React Diffing Algorithm의 두 가지 가정에 대해 이해합니다.
5.React가 DOM 트리를 탐색하는 방법에 대해 이해합니다.
6.다른 타입의 DOM 엘리먼트인 경우와 같은 타입의 DOM 엘리먼트인 경우의 알고리즘 동작 방식을 이해합니다.
7.자식 엘리먼트의 재귀적 처리와 key에 대해 이해합니다.
Chapter2. React Hooks
8.Function Component와 Class Component에 대해 이해합니다.
9.Hook에 대해 이해합니다.
10.Hook 사용 규칙에 대해 이해합니다.
Chapter2-1. useMemo
11.useMemo을 어느 때에 사용하는지 이해합니다.
12.Memoization의 개념에 대해 이해합니다.
13.실습을 통해 useMemo을 직접 작성해보고 어떻게 작성하는지 이해합니다.
Chapter2-2. useCallback
14.useCallback을 어느 때에 사용하는지 이해합니다.
15.useCallback과 참조 동등성에 대해 이해합니다.
16.실습을 통해 useCallback을 직접 작성해보고 어떻게 작성하는지 이해합니다.
1.리플로우를 줄이기 위해 가상화된 돔을 만들어 차이점을 비교해 달라진 부분만 리렌더링하기 위해서.
2.예를 들어 집을 비유하면 집에서 시계를 없앨 경우 그냥 시계를 벽에서 떼면 되지만 랜더링에서는 집 크게는 아파트 전체를 리플로우해야 할 수 있다. 그렇기 때문에 가상 DOM 여기서 예를 들자면 집의 도면등을 그린 가상의 집에서 시계가 있는 부분에서 시계를 제거한 후 차이점은 시계 하나라는 점을 반영해서 시계만 제거하는 기법인 가상 DOM을 사용해 시간과 데이터를 절약할 수 있다.
3. DOM은 추상화된 자바스크립트 객체의 형태를 가지고 있다. 일반적인 DOM과 유사하게 HTML문서 객체를 기반으로 하며 가상화 한 상태기 때문에 실제 DOM과는 무관하게 조작할 수 있다.
4.기존의 트리를 다른 트리로 변형시킬 기존의 조작방식은 O(n^3)의 복잡도를 가지고 있었기 때문에 엘리먼트의 규모가 커질수록 들어가는 시간이 세제곱만큼 늘어난다는 단점을 가지고 있어 기하급수적으로 늘어나는 비용을 감당할 수 없었다.
React Diffing Algorithm은 아래의 두 가지 가정을 기본으로 전제한다.
1.각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
2.개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는
자식 요소가 무엇인지 알아낼 수 있을 것이다.
1번은 변경이 있기 때문에 당연히 다른 트리를 구축할 수 밖에 없으며 2번은 key 프로퍼티를 통해서 자식요소로 무엇이 있어야 하는지를 비교할 수 있기 때문에 기존에 존재하던 key를 그대로 보유한 엘리먼트들은 유지시켜야 함을 알 수 있다.
5.DOM 트리를 탐색할 경우 BFS의 일종인 계층별 순회비교를 사용한다.
6.다른 타입의 DOM 엘리먼트인 경우 그 하위에 있는 모든 자식요소들도 전부 파괴되며 재생성된다. 만약 부모엘리먼트의 태그만 바뀐다고 하더라도 부모자체를 인식하지 못했기 때문에 그 하위 자식들이 버려진다고 할 수 있다. 하지만 같은 타입의 DOM 엘리먼트인 경우 그 하위에 바뀐 점들만 바뀐다. 물론 그 하위 엘리먼트중 하나의 태그가 바뀌는 일이 있다면 그 하위 엘리먼트의 자식요소들은 모두 재생성된다.
7.자식 엘리먼트의 재귀적 처리에는 순서를 도입해서 첫번째 값과 바뀐 DOM의 첫번쨰 값(자식)을 비교하기 때문에 만약 바뀐 DOM의 첫번째에 사소한 요소를 추가한다고 하더라도 매칭이 제대로 되지 않아 새로운 값들을 모두 재생성해야한다. 마치 단추를 잘못 끼우면 그 아래가 모두 어긋나서 새로 일을 하는 느낌이라고 볼 수 있다.
하지만 여기에 Key를 도입한다면 자식요소로 있어야 할 요소들이 모두 존재하며 단지 하나가 추가되었고 그 위치가 첫번째 순서임을 알 수 있기 때문에 맨 앞에 새로 변경된 요소만 추가할 수 있어 효율성이 올라간다.
8.Class Component는 예전에 사용하던 컴포넌트이며 Function Component는 새로 추가된(이미 추가된지 오래 되기는 했지만) 컴포넌트로 Hook을 사용할 수 있다.
9.Hook은 함수형 컴포넌트에서 상태 값 및 여러 기능을 편하게 사용할 수 있는 메소드를 의미한다. 예전에 배운 리듀서와 use메모, use콜백, useState같은 편리한 친구들이 Hook에 속한다.
10.Hook의 사용 규칙은 다음과 같다.
1.리액트 함수의 최상위에서만 호출해야 한다.
2.오직 리액트 함수 내에서만 사용되어야 한다.
11.useMemo은 특정 값(value)를 재사용하고자 할 때 사용하는 Hook으로 반복적으로 계산을 하게 되는 경우 투입할 값이 동일할 경우 출력될 값이 같음을 이용해 함수를 호출하지 않고 결과만을 리턴한다.
12.메모이제이션(Memoization)은 기존에 수행한 연산의 결과를 저장했다가 같은 입력이 있는 경우 재활용하는 기법으로 성능 최적화에 도움이 된다.
13.useMemo는 아래와 같은 방식으로 사용할 수 있다.
1. import { useMemo } from "react";
2. 변경함수에 useMemo 덮어씌우고 변수값들 대괄호에 넣어주기(입력값이 같은지 비교하기 위해)
const answer = calculate(val1, val2);
=> const answer = useMemo(() => calculate(val1, val2), [val1, val2]);
14.useCallback은 useMemo와는 다르게 함수의 재사용을 위해 사용하는 Hook으로 일반적으로 사용함에 있어서 최적화를 느낄 수 없지만
리액트의 리렌더링 시 "함수를 새로이 만들어서 호출"을 한다는 부분에서 문제가 생길 수 있기 때문에 함수를 다른 함수의 인자로 넘기거나 props로 자식 컴포넌트에 넘겨줄 때 에러가 생기지 않도록 useCallback을 사용해서 "같은 함수"를 보내줄 수 있다는 장점이 있다.
15.참조 동등성이란 같은 함수를 가지고 결과를 비교하더라도 객체간의 주소가 다르기 때문에 일반적인 값의 비교(==)를 하면 true를 받을 수 있지만 엄밀비교(===)를 사용할 경우에는 false가 나와버린다. 그렇기 때문에 useCallback으로 동일한 함수를 사용할 수 있다는 부분은 그 함수를 여러곳에서 동시에 사용할 때 문제를 막을 수 있는 안정성을 보장한다.
16.useCallback은 아래와 같은 방식으로 사용할 수 있다.
1.import { useCallback } from "react";
2.변경함수에 useCallback 덮어씌우고 변수값들 대괄호에 넣어주기(입력값 비교용)
const getItems = () => [input +1, input + 10, input + 100];
=> const getItems = useCallback(() => [input +1, input + 10, input + 100],[input]);
이론을 재미있게 학습헀지만 생각보다 정리하려니 뭔가 많은 것 같다.
알고리즘 위주로 학습했지만 오히려 그래서 더 리액트 심화에서 재미있게 학습할 수 있었다.
