<목차>
- 버츄얼 돔과 리얼 돔
- useRef
- useEffect
- var, let, const
4. 버츄얼 돔과 리얼 돔
버츄얼 돔
- Virtual DOM
- 리얼 돔의 가벼운 복사본
- 자바스크립트 객체로 표현
- 실제 DOM과는 독립적
- 리액트와 같은 프론트엔드 라이브러리에서 사용(리액트에서 사용)
- 리얼돔 보다 빠르게 업데이트
- 변경 사항을 버츄얼돔에 먼저 적용하고 최종적으로 리얼돔과 비교하여 실제 변경된 부분만 리얼 돔에 반영
- 상태가 변경될 때 전체 UI를 버츄얼 돔에 다시 렌더링하여 이전 버츄얼 돔과 비교하여 실제 변경부분을 식별
- 추가적인 메모리 사용=> 리소스 사용 영향을 줄 수 있음
리얼 돔
- Real DOM
- 웹페이지의 HTML과 직접적으로 연결된 객체 모델
- 브라우저가 HTML을 파싱하여 생성한 페이지 그 자체
- 직접 조작하는 것은 비용이 많이든다.
- 비교적 느림
- 특히 DOM요소가 많거나 복잡할 떄 성능이 안좋아질 수 있다.
- 변경된 요소 전체를 새로 작성 후 다시 렌더링 => 렌더링 성능 저하
Q. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
버츄얼 돔과 리얼 돔의 차이를 설명해보겠습니다. 우선 리얼 돔은 HTML과 직접적으로 연결된 객체 모델이고 브라우저가 HTML을 분해하고 해석(파싱)하여 생성한 페이지 그 자체입니다. 그러다보니 리얼 돔을 직접 조작하는 것은 비용이 많이 발생하고 비교적 느리다는 단점이 있습니다. 요소가 변경될 때 새로 작성 후 다시 렌더링 하기 때문에 렌더링 성능 저하가 나타날 수있고 돔 요소가 많거나 복잡할때 성능이 떨어지기도 합니다. 리얼 돔과 비교해 버츄얼 돔은 리얼돔의 가벼운 복사본으로 실제 돔과는 독립적으로 작용합니다. 대표적으로 리액트는 버츄얼 돔을 사용하는 대표 라이브러리입니다. 변경된 사항들을 버츄얼돔들끼리 비교하여 변경된 부분만 리얼 돔에 반영하는 방식으로 리얼돔과 다르게 업데이트가 빠르고 비용을 아낄 수 있습니다. 다만 버츄얼 돔을 위해서 추가적인 메모리가 사용되어야 하기 때문에 리소스사용에 영향을 줄 수 있습니다.
5. useRef
- 리액트 훅
- DOM요소 접근 => 실제 돔 노드 참조 가능 , 돔에 직접적 접근 필요시 사용
- 예를들어 current속성의 포커스를 사용할때
- 렌더링과 상관없이 데이터 저장 가능 , useState와 비교
- 저장된 데이터가 변경되어도 컴포넌트가 리렌더링 되지 않음
- 예를 들어 타이머기능 등
Q. useRef에 대해 설명해주세요.
useRef는 리액트 훅 중 하나로 주로 두가지 목적으로 사용됩니다. 첫번째는 돔요소에 접근하기 위해 사용됩니다. 예를들어 특정 input요소에 포커스를 주고 싶을 때 ref객체를 생성한 후 current속성을 통해 input DOM 요소에 접근하고 focus 메서드를 호출할 수 있습니다. 두번째로 useRef는 랜더링 사이에 데이터를 유지하고자 할 때 사용됩니다. useRef를 사용하여 컴포넌트 렌더링 사이에 데이터를 유지 할 수 있기에 리렌더링이 발생해도 초기화 되지않고 값을 유지할 수 있고 반대로 상태와 달리 값의 변경이 리렌더링을 유발하지 않습니다. 이런 특징 덕분에 리렌더링을 줄여 성능최적화에 도움이 될 수 있습니다.
6. useEffect
- 리액트 훅
- 사이드 이펙트 (부수효과) 수행하기 위해 사용됨
- 순서 1 : 컴포넌트 렌더링
리액트 컴포넌트가 화면에 렌더링 -> 처음, 아직 useEffect코드느 실행되지 않음 - 순서2 : 효과 실행
렌더링이 완료되고 useEffect내부 함수 실행(컴포넌트가 화면에 나타난 직후), 데이터 요청, 이벤트리스터 설정등 작업 수행 - 순서3 : 정리함수 (옵션), 클린업함수
컴포넌트가 제거될 때, 컴포넌트가 화면에서 사라지기 전에 정리작업 수행
의존성 배열에 명시된 값들 중 하나라도 변경될때, 새로운 효과가 실행되기 전 기존의 효과 정리, 새로운 효과 전 준비단계 - 순서4 : 의존성 배열의 영향
의존성 배열의 변수의 값이 변경 될 때 마다 useEffect 내부 함수만 다시 실행, 배열이 비어있는 경우 컴포넌트가 마운트될때 한번만 실행, 언마운트될때 정리함수 실행/ 의존성 배열이 없다면, 컴포넌트가 리렌더링 될 때 마다 useEffect 실행 - useEffect와 리렌더링은 별개로 직접적으로 리렌더링을 일으키지는 않음
- 다만 내부함수에 상태변경이 일어나는 경우 컴포넌트가 재렌더링 되기도 함
Q. useEffect의 실행 순서에 대해 설명해주세요.
useEffect는 리액트 훅 중 하나로 사이드이펙트를 수행하기 위해 사용됩니다. 실행 순서는 크게 4가지로 구분됩니다. 첫번째는 useEffect 코드가 아직 실행되지 않은 "컴포넌트 렌더링"으로 처음 코드가 렌더링이 되는 과정을 뜻합니다. 두번째는 "효과가 실행되는 과정"으로 렌더링이 완료되고 즉 화면에 컴포넌트가 나타난 직후 데이터를 요청하고 이벤트 리스터 설정등의 작업을 수행합니다. 이때 처음으로 useEffect의 내부 함수가 실행됩니다. 세번째 과정은 필요한 경우에만 사용되는 경우로 옵션이라고 볼 수 있습니다. 클린업 함수가 실행되는 단계로 컴포넌트가 화면에 사라지기전 정리작업을 수행하거나 의존성배열중 하나라도 변경될 때 새로운 효과가 실행되기전 기존의 효과를 정리하고 싶을 때 사용됩니다. 마지막은 "의존성 배열에 영향을 받는 과정"입니다. 의존성배열의 값이 변경될 때마다 useEffect 내부 함수가 실행됩니다. 의존성 배열이 비어있는 경우 컴포넌트가 마운트될 때 한번만 useEffect 내부함수가 실행되며 의존성 배열이 없는 경우 컴포넌트가 리렌더링 되는 모든 상황에 useEffect 내부 함수가 실행됩니다.
7. var, let, const
var
변수 선언 키워드
함수 스코프 (function scope)
해당 함수 전체에 사용가능
함수 밖에서 선언되면 전역 변수
호이스팅 된다 :선언부가 스코프 최상단으로 끌어올려짐
선언과 초기화가 함께 이루어져 변수위치에 상관없이 함수가 시작되자마자 undefined로 접근 가능
재선언 가능
예상치못한 문제를 일으킬수 있어서 더이상 사용하지 않는다.
let
블록 스코프 : {}로 둘러싸인 블록 내에서만 변수가 유효
호이스팅 되지만 초기화되지 않은 상태에서 접근하려면 에러발생
재선언 불가
재할당은 가능
const
블록 스코프 : let과 같다.
호이스팅 되지만 let 처럼 초기화되지 않은 상태에서 접근하면 에러발생
재선언 불가능
재할당 불가능
Q. var, let, const의 차이에 대해 알려주세요.
=> var, let, const는 변수 선언 키워드로 상이한 차이점이 있습니다. var는 해당 함수에서 사용가능한 함수스코프를 사용한다는 점과 호이스팅될 때 선언과 초기화가 함께 이루어져 해당 변수의 위치에 상관없이 함수의 시작부터 해당변수를 undefined로 접근할 수 있다는 점, 재선언이 가능하다는 특징이 있습니다. 이러한 특징들 때문에 모던자바스크립트에서는 사용을 지양하고 있습니다. var의 대체제로 let과 const가 있습니다. var와 다르게 블록 스코프를 사용해 좀 더 엄격한 스코프를 따르고 호이스팅은 되지만 초기화 되지 않은 상태에선 에러를 발생시킵니다. var가 재선언,재할당이 가능했던 점과는 달리 let, const는 재선언이 불가능 합니다. let과 const는 재할당 가능여부에 따라 나뉩니다. 재할당을 하고싶을땐 let, 불변한 값을 넣고 싶을 때는 const를 사용합니다.
