TIL - 2022.10.18 Virtual DOM, useRef, useEffect, var, let, const, Async/Await, Promise

 

 

✅ 정리했었던 내용 복습

 

1️⃣ Virtual DOM과 Real DOM의 차이

 

- DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델

- DOM은 HTML에 동적인 변화가 있을 경우 전체 페이지(DOM Tree)를 검색해서 해당 부분을 교체한 후 전체 페이지에 대해 리렌더링을 해주어야 하는 문제점이 발생, 이에 대한 문제점을 해결하기 위해 나온 것이 Virtual DOM

- Virtual DOM을 사용하면 실제 DOM에 조작하여 접근하는 대신, 추상화한 자바스크립트 객체를 구상하여 사용한다.

- DOM의 상태를 메모리에 저장하고 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링 해서 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교(가상돔끼리 비교)해서 바뀐 부분만 실제 DOM에 적용되기 때문에 성능을 향상시킬 수 있다.

 

2️⃣ useRef

 

- useRef는 어떤 특정 DOM을 선택할 수 있게 해주는 Hook이다.

- DOM을 선택해서 포커스를 주거나, 특정 엘리먼트의 색상이나 크기를 변경하는 경우 등이 있는데 그 때 주로 사용된다.

 

 

3️⃣ useEffect

 

- useEffect는 컴포넌트가 렌더링이 된 후 실행된다.

- bottom-top 방식으로 작동

- 하위에 있는 컴포넌트의 useEffect가 먼저 실행, 차례대로 그 위의 컴포넌트의 useEffect가 실행된다.

 

 

4️⃣ var, let, const

 

- ES6 이전에는 var만 존재

- var는 중복 선언 가능으로 인한 예기치 못한 값이 반환될 수 있다, 재할당 가능, 함수 외부에서 선언한 변수는 모두 전역 변수로 변수 선언문 이전에 변수를 참조하면 undefind가 반환된다.

- let은 중복 선언 불가능, 재할당 가능, 지역 스코프

- const는 중복 선언, 재할당 모두 불가능, 객체는 재할당 가능, 지역 스코프, let과의 차이점은 선언과 초기화를 동시에 해야 하는 것

 

 

5️⃣ Async/Await 와 Promise 차이

 

- Promise는 .catch()문을 통해 에러 핸들링이 가능하지만, Async/Await은 에러 핸들링을 할 수 있는 기능이 없어 try-catch문을 활용해야 한다.

- Promise는 코드 가독성면에서 .then의 코드가 길어질수록 가독성이 떨어진다.

- Async/Await은 비동기 코드가 동기 코드처럼 보이게 해주기 때문에 코드 흐름을 이해하기 쉽고 가독성을 높여준다.

 

 

계속해서 반복적으로 공부하고 정리하기!

TIL과 정리 내용들이 중간중간 계속 겹치더라도 포기하지 말고 반복해서 공부하고 이해하자

할 수 있다!