Section4 - Unit 4 [React] 심화

Virtual DOM

: React 환경에서 UI의 상태를 추적하고 변경된 요소를 적용시켜 갱신시키기 위한 가상의 DOM, 실재 DOM 객체를 대응함

• 실제 DOM트리에 직접적으로 접근에 변경하는 것이 아닌 변경점을 적용한 가상의 트리와 비교해 변경점으로 변경하는 방식으로 간접적으로 갱신함

Virtual DOM의 등장 배경

: DOM 트리 직접조작하면 전체 DOM Tree에 대한 reflow가 발생하고 해당 과정에서 비효율적으로 자원을 많이 사용하게됨 --> 이를 해결하고자

Virtual DOM vs Real DOM Update

• Real DOM
  : 변경된 요소가 있을 시 트리 전체를 구성하는 노드를 재생성 및 재 배치하고 paint 과정을 다시 거침 ---> 비효율적
• Virtual DOM
  : 변경된 요소가 있을 시 이전 상태 트리와 현재 가상 트리를 비교해 변경점을 확인하고 해당 및 관련한 요소만 갱신하여 트리에 적용 ---> 효율적 보통 더 빠름

🔔 하지만 모든 경우에서만 빠른 것 아님!
: reflow로 인한 자원 낭비가 심한 경우에는 가상돔이 효율적인 것 뿐 상황에 따라 효율성을 다를 수 있음

React Diffing Algorithm

: React는 순차적으로 모든 요소를 탐색 및 조작해 갱신하는 것이 아닌 아래의 2가지 원칙을 바탕으로 BFS 방식으로 조작함
1. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
2. 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링이 발생해도 변경되지 말아할 자식 요소가 무엇인지 알아낼 수 있다.

Case 다른 타입의 DOM 요소

• 기존의 가상 DOM과 비교하여 컴포넌트의 부모 요소가 다른 타입으로 변경된 경우 해당 요소 해당 컴포넌트(state 포함)를 파괴하고 재생성함

Case 같은 타입의 DOM 요소

: 같은 타입의 DOM 요소 비교시 DOM노드는 유지한테 변경한 속성만을 갱신함

자식 요소의 재귀적 처리 with key

: 자식 요소의 추가 및 삭제 등의 변경점이 있을 경우, key 속성을 활용해 자식 요소를 확인하고 변경된 자식 요소만 변환하며 기존의 자식 요소들은 유지함

React Hooks

Class Component에 비해 Function Component이 가지는 장점

: 함수형 컴포넌트가 클래스형 컴포넌트에 비교 더 직관적이고 간단하게 컴포넌트 설계할 수 있으며 React 함수내에서는 Hooks를 사용할 수 있어 상태를 포함하는 컴포넌트를 설계할 수 있음 (클래스형에서는 Hook 불가능)

Hooks

: React 16.8에 추가된 기능으로 class 없이 statedhk React 기능을 사용하게 해주는 라이브러리

[사용규칙]
1. 리액트 함수의 최상위에서 호출해야함 --> 어길시 예기치 않은 오류 발생 우려
2. 리액트 함수 내에서만 사용가능 --> React 동작 방식임으로 지켜야함

Rendering 최적화 Hook

알아보기전!

• Memoization
  : 기존에 한 연산의 결과를 기억하고 있다가 기존 연산같은 결과를 요구하는 입력이 들어올 경우 기억하고 있는 결과를 재활용하는 프로그래밍 기법으로, 최적화를 하기 위한 알고리즘 개념

useMemo

: useMemo는 이러한 Memoization 개념을 활용하는 Hook으로 결과값을 재활용해 랜더링 여부를 판단함
useMemo는

• 첫번째 인자 값를 받아 입력에 따른 결과를 생성하고
• 두번째 인자 값를 받아 이전에 입력에 따른 기존의 결과값을 기억하고 재활용 여부를 판단함

[사용예시 코드 ]

import { useMemo } from "react";

function Calculator({value}){

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

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

• 이전에 있었던 입력을 모두 기억하는가..?
  => 아니다. 직전에 입력되었던 입력을 기억하고 있음

useCallback

: useCallback는 이러한 Memoization 개념을 활용하는 Hook으로 입력의 동일 여부에 따라 함수 재사용 여부 판단

• 첫 번째 인자로는 호출할 함수를
• 두 번째 인자로 받는 입력에 따라 해당 함수

[사용예시 코드]

import React, { useCallback } from "react";

function Calculator({x, y}){

	const add = useCallback(() => x + y, [x, y]);

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

--> 코드를 직접 쳐보면서 사용하면 확실히 이해가 빠름

• 이렇게 보면 useMemo와 큰 차이를 모르겠다. 언제 사용할까?

useMemo, useCallback 의 내가 생각한 사용법

• useMemo의 경우 컴포넌트 내에서 함수자체의 결과 값을 사용 혹은 상태변경하는 경우
• useCallback의 경우 같은 결과를 도출하는 함수 일지라도 각각 생성될 경우 다른 메모리 주소값을 가지기에 useCallback을 사용해 같은 기능을 하는 함수를 하나만을 호출해 사용하도록 함으로 오류 발생 우려 적어짐

Custom Hook

: 동일한 로직을 동작과 함수상태관리가 반복적으로 요구될때 개발자가 재사용 목적으로 설계한 Hook

• 상황마다 필요한 커스텀 훅을 제작하는 역량 중요

코드분할

React 환경에서의 코드분할 기능

• Dynamic Import
  : 외부의 컴포넌트가 필요한 함수 공간에서 동적으로 import해서 사용할 수 있도록함

• 기존의 방식에서는 최상단에서 모든 컴포넌트를 불러와 첫 화면 랜더링까지 많은 자원 소모
  ==> 필요하지 않는 위치에서는 불러오지 않음으로 자원 소모 감소

React.lazy()

: Dynamic Import를 가능하게 해주는 매소드로 해당 컴포넌트는 필요한 순간에 동적으로 가져옴

• React.lazy()로 감싸준 컴포넌트는 React.suspense 컴포넌트 하위의 환경에서만 렌더링 가능

React.Suspense

: React.lazy()를 통해 컴포넌트를 가져오는 과정에서 생기는 로딩 완료 전까지 로딩화면을 보여주고 로딩완료 시 불러온 컴포넌트를 보여주도록하는 매소드 (여러 개의 lazy 컴포넌트 관리 가능)

코드 분할 기점

: Route를 통해 웹 페이지 전환 상황에서 lazy와 suspense를 사용하면 전환시 로딩화면을 보여주고 전환하는 방식으로 동작 (로딩 화면을 전환시 매번 보여주는 건 해당 사이트의 특징에 따라 선택해서 사용해야 함)

• 예시 코드

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

-참고 codestates