useContext, memo, useCallback, useMemo, 가상DOM

useContext 
react context의 필요성 

일반적으로 부모컴포넌트에서 자식컴포넌트로 데이터를 넘길때 props를 썼음. 근데 너무 깊어지게 되면 prop drilling 현상이 일어남. 문제점은 
1. 너무 깊어지면 prop이 어떤 컴포넌트에서 왔는지 파악이 어려움
2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어짐. -> 대처가 늦어짐
이런 단점들 때문에 등장한것이 react context API 라는것, useContext hook을 통해 쉽게 전역 데이터 관리를 할 수 있게 됐음.

주의점으론 렌더링문제가있음 
useContext를 사용할 때, provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링됨. 따라서 value 부분은 항상 신경써야함.

리렌더링 조건
컴포넌트에서 state가 바뀔떄
컴포넌트가 내려받은 props가 변경됐을때
부모컴포넌트가 리렌더링된경우 자식컴포넌트는 모두 리렌더링됨.

리액트에서 리렌더*이 빈번하게, 자주 일어난다는 것은 그렇게 좋은 건아님.
비용이 발생하는 것은 최대한 줄여야 함. 이런 작업을 우리는 최적화(Optimization)이라고 함. 
리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법

- memo(React.memo) : 컴포넌트를 캐싱
- useCallback : 함수를 캐싱
- useMemo : 값을 캐싱

memo
리-렌더링의 발생 조건 중 3번째 경우. 즉, 부모 컴포넌트가 리렌더링 되면 자식컴포넌트는 모두 리렌더링 된다는 것은 그림으로 보면

1번 컴포넌트가 리렌더링 된 경우, 2~7번이 모두 리렌더링 된다.
4번 컴포넌트가 리렌더링 된 경우, 6, 7번이 모두 리렌더링 된다.

useCallback
React.memo는 컴포넌트를 메모이제이션 했다면, useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션)

useMemo 
여기서 말하는 memo는 memoization을 뜻함. 

동일한 값을 반환하는 함수를 계속 호출해야 하면 필요없는 렌더링을 함
 맨 처음 해당 값을 반환할 때 그 값을 특별한 곳(메모리)에 저장. 
이렇게 하면 필요할 때 마다 다시 함수를 호출해서 계산하는게 아니라 이미 저장한 값을 단순히 꺼내와서 쓸 수 있음. 보통 이러한 기법을 캐싱을 한다. 라고 표현함.
주의점으론 남발하게되면 별도의 메모리 확보를 너무 많이 하기 때문에 오히려 성능이 악화될 수 있음.

가상돔(Virtual DOM)
리액트나 뷰는 가상돔을 사용해 원하는 화면을 브라우저에 그려줌. 자체적으로 효율적인 알고리즘을 사용해서 그려주기 때문에 속도가 빠름.

 

우리가 배우는 리액트는 가상DOM을 이용해서 실제DOM을 변경하는 작업을 상당히 효율적으로 수행함.

가상 DOM에 대해 공부를 하게 되면 이 그림을 상당히 자주 보게 됨, 가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태 

실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행

 

DOM조작과정

예를들어 인스타그램의 좋아요 버튼을 누르면

 

하트가 빨간색으로 변함. 이 빨간하트에 해당되는 엘리먼트 DOM요소가 갱신되어야 한다는 의미.

즉 DOM을 조작해야 한다는 의미.

 

[STEP 1]

이 과정에서 리액트는 항상 2가지 버전의 가상DOM을 가지고 있음.

1. 화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체
2. 화면 갱신 후 보여야 할 가상 DOM 객체

리액트는 state가 변경돼야만 리렌더링이 됨. 2번에 해당되는 가상 DOM을 만듦.

 

[STEP 2 : diffing]

state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 상당히 빠르게 파악함

[STEP 3 : 재조정(reconciliation)]

파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시킴. 적용시킬 때는, 변경사항을 모두 모아 한 번만 적용을 시켜요(Batch Update)

 

(3) Batch Update

우리는 앞서, useState 시간에 리액트가 state를 batch 방법으로 update 한다는 것을 배웠음.

변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법

클릭한번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면

실제 DOM은 5번의 화면 갱신이 필요한 반면 가상DOM은 Batch Update로 인해 한번만 갱신이 필요함