Q1) 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
- 버츄얼 돔
- 버츄얼 돔은 리얼 돔의 복사본으로 컴포넌트에 새로운 변경사항이 있을 경우, 이를 리얼 돔에 반영하기 전 버츄얼 돔에 먼저 반영하여 리얼 돔과 비교했을 때 수정된 부분만 리얼 돔에 반영한다. 버츄얼 돔은 메모리에 저장되어 빠르게 수정할 수 있고 수정 사항을 한번에 batch 방식으로 갱신한다.
예비 답변
리얼 돔(Real DOM)은 웹 페이지를 이루는 HTML 태그들을 자바스크립트가 이용할 수 있게 끔 브라우저가 트리구조로 만든 객체 모델을 말합니다.버츄얼 돔(Virtual DOM)은 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용하는리액트(React)와 같은 프론트엔드 라이브러리에서 사용되는 가상의 돔 구조입니다. 데이터가 업데이트 되면 리얼 돔은 변경 사항을 처리하기 위해 전체 페이지를 다시 렌더링해야 합니다. 이러한 작업은 성능상의 단점을 발생시킬 수 있습니다. 버츄얼 돔은 이전 버츄얼 돔에 있던 내용과 현재 내용을 비교하여 (가상 돔 끼리 비교)상태 변화를 리얼 돔에 바로 반영하지 않고 하나로 모아 바뀐부분만을 실제 DOM에 적용시켜 batch update를 하여 Diffing 과정을 거쳐 비용을 최소화 시킵니다.
Q2) useRef에 대해 설명해주세요.
- useRef
- 특정 DOM 요소에 접근하여 직접 컨트롤 할 수 있도록 해주는 Hook
예를 들면 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용
- 특정 DOM 요소에 접근하여 직접 컨트롤 할 수 있도록 해주는 Hook
예비답변
useRef는 크게 2가지의 역할을 수행합니다.먼저, 저장공간으로서의 역할인데, state와 비슷한 역할을 하지만 state와의 차이점은 state는 변화가 일어나면 리-렌더링이 일어나고 내부 변수들은 초기화 되는 반면에, ref에 저장한 값은 렌더링이 일어나지 않습니다. 즉, ref의 값 변화가 일어나도 렌더링으로 인해 내부변수들이 초기화 되는 것을 막을 수 있습니다.두번째로 돔 요소에 접근할 수 있는 역할입니다.바닐라js에서 특정 돔을 선택하기 위해 getElementById 또는 querySelector를 이용했는데리액트에서도 특정 돔을 선택해야 하는 경우가 있습니다. 예를 들어 화면이 렌더링 된 직후 특정 input 태그가 포커싱이 되어야 하는 경우 useRef를 사용합니다.
Q3) useEffect의 실행 순서에 대해 설명해주세요.
-
컴포넌트 렌더링:
컴포넌트가 렌더링되고 화면에 표시됩니다. -
useEffect 등록:
useEffect 함수가 컴포넌트 내부에서 호출됩니다. 이때, useEffect 내부에서 정의된 부수 효과 함수와, 종속성 배열(dependency array)이 함께 등록됩니다. -
컴포넌트 렌더링 완료:
컴포넌트의 렌더링이 완료되면, 화면에 컴포넌트가 표시됩니다. -
useEffect의 부수 효과 함수 실행:
등록된 useEffect의 부수 효과 함수가 실행됩니다.
만약 종속성 배열이 있다면, 배열에 명시된 종속성이 바뀌었을 때에만 부수 효과 함수가 다시 실행됩니다. -
컴포넌트 업데이트:
만약 부수 효과 함수 내부에서 상태(state)나 프로퍼티(props)가 변경되면, 해당 변경사항이 반영되어 컴포넌트가 다시 렌더링됩니다.
다시 렌더링된 후, useEffect의 부수 효과 함수가 다시 실행됩니다. 이때 종속성 배열이 있다면, 종속성이 변경된 경우에만 다시 실행됩니다.
useEffect는 리액트에서 컴포넌트가 렌더링 될 때 또는 특정 state가 변경될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook입니다.실행되는 순서는 첫째, 컴포넌트가 렌더링 되면 useEffect의 내용이 실행되기 전의 화면이 먼저 그려집니다.두번째, useEffect 내의 콜백 함수가 실행이 되며, 세번째, useEffect의 두번째 매개변수로 전달된 의존성 배열이 체크가 됩니다.네번째, 만약 의존성 배열에 들어있는 값이 변경되면 컴포넌트가 리-렌더링되고 useEffect의 내용이 다시 실행됩니다.
