22.07.27_TIL

📌 리액트 훅에 대해서 학습을 하는데 사실 앞선 과정에서 리액트 훅을 개인적으로 찾아서 학습한 뒤 사용을 하고 있었기에 조금더 정확히 짚고 가는 계기가 될 것이다.

📗 오늘 학습한 내용

Virtual DOM

• 가상의 DOM 객체 (추상화된 JavaScript 객체의 형태)
• React는 실제 DOM 객체에 접근하여 조작하는 대신 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.

Real DOM (DOM, Document Object Model)

• 브라우저가 트리 구조로 만든 객체 모델
• 브라우저가 JavaScript와 같은 스크립팅 언어로 html 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다.

DOM의 조작 속도가 느려지는 이유

• DOM의 조작으로 업데이트 된 요소와 그의 자식 요소들에 의해 DOM 트리르 재구축함으로써 재랜더링 과정을 거쳐 UI를 업데이트 해야한다.
• 재연산을 해야하기 때문에 속도가 느려진다.
• 가상 DOM을 사용하면 일반적인 DOM 조작보다 속도가 빠르다.

React Diffing Algorithm

• 요소 하나하나를 바꾸다보면 수십만번의 비교가 이루어져야하고, 이 작업은 상당히 비싸다. 그래서 리액트에서는 두 개의 트리가 나온다는 점과 모든 개발자들이 key props를 통해 바뀌었다는 것을 명시할 수 있다는 점으로 해당 문제를 해결하기 위해나온 알고리즘이다.

React Diffing Algorithm 동작 원리

1. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
2. 개발자는 키 소품을 사용하여 다른 렌더링에서 어떤 자식 요소가 안정적일 수 있는 힌트를 줄 수 있습니다.

React가 DOM 트리를 탐색하는 방법

• 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색합니다.
• 너비 우선 탐색(BFS)의 일종이다.

Class Component

• 복잡해질수록 이해하기 어려워지고, 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다는 단점이있다.
• React의 클래스 컴포넌트를 사용하기 위해서는 JavaScript의 this 키워드가 어떤 방식으로 동작하는지 알아야하며, 문법을 정확히 알지 못하면 동작 방식 자체를 정확히 이해하기 어렵게 만들었습니다.
• 위와 같은 문제점을 보완하기 위해 함수 컴포넌트로 이동하기 시작하였지만 상태 값을 사용하거나 최적화할 수 있는 기능들이 미진한 부분을 보완하기 위해 나온 것이 바로 Hook이라는 개념입니다.

Function Component

• 클래스형 컴포넌트에 비해 훨씬 더 직관적이고, 보기 쉽다는 특징이 있다.
• 함수형 컴포넌트는 렌더링이되면 함수가 호출되고, 모든 내부 변수가 초기화 된다.

Hook이란?

• React 16.8에 새로 추가된 기능이다.
• class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.
• 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다.

Hook 사용 규칙

1. 리액트 함수의 최상위에서만 호출해야 한다.
   • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 동작하지 않을 경우가 있다.
2. 오직 리액트 함순 내에서만 사용되어야 한다.
   • 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서는 호출해서는 안 된다.

useMemo

• 특정 값(value)를 재사용하고자 할 때 사용하는 Hook
• 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화한다.
• 렌더링 할 때마다 값이 바뀌는 것이 아니라면 값을 어딘가에 저장 해뒀다가 다시 꺼내서 쓸 수 있게한다. (메모이제이션)
• Memoization
  • 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
• 구조
  • 첫 번째 인자 콜백 함수: 콜백함수가 return 하는 값이 useMemo가 return 하는 값이다.
  • 두번째 인자 배열(의존성 배열): 배열안에 요소의 값이 업데이트 될때만 콜백함수가 실행된다. 
    빈 배열일 경우 최초 한 번만 실행된다.

const value = useMemo(() => {
	return calculate();
}, [item]);

useCallback

• 함수의 재사용을 위해 사용하는 Hook
• 자식 컴포넌트의 props로 함수를 전달해줄 때 사용하기 좋다.
• 참조 동등성에 의존한다.
• 메모이제이션 기법을 사용한 Hook이다.
• 인자로 전달받은 함수 그 자체를 메모이제이션 한다.

const calculate = useCallback((num) => {
	return num + 1;
}, [item])

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• Authentication

📝 중요한 내용

• 가상 DOM
• React Diffing Algorithm
• 컴포넌트 최적화
• useMemo
• useCallback