[TIL] 기술면접 질문 정리 - 버츄얼 돔/리얼 돔, useRef

💡 TIL 20230831 - 기술면접 질문 정리 - 버츄얼 돔/리얼 돔, useRef, useEffect

---

1. 버과 리얼 돔의 차이

먼저 DOM이란 Document Object Model의 약자로 웹 어플리케이션의 HTML 요소들을 노드라는 단위로 나누어 노드들을 연결한 트리 구조의 객체입니다.

실제 DOM은 브라우저 화면을 렌더링할 때 이용하는 HTML 요소(노드)들의 트리 구조이고, 가상 DOM은 실제DOM의 가벼운 복사본이며, 메모리에만 존재하는 가상의 트리구조 입니다. 가상 DOM은 React.js, Vue.js와 같은 라이브러리와 프레임워크에서 사용됩니다.

 

둘의 가장 큰 차이점은 실제 DOM의 일부를 변경하면 전체 DOM을 한꺼번에 다시 렌더링하기 때문에 성능 문제가 발생할 수 있습니다. 또한 브라우저는 JS, Html/CSS만 읽을 수 있고 JS는 단일 스레드 언어이기 때문에 전체 페이지를 다시 로드해야 한다는 점입니다.

 

가상 DOM에서는 DOM의 일부분이 변경되면 이전 DOM을 검사하고 변경된 부분을 검사하여 해당 부분만 다시 렌더링하고 변경된 DOM을 표시하는 "differ"라는 알고리즘을 실행하는 과정을 통해, 더 효율적으로 렌더링할 수 있다는 장점이 있습니다.

 

 

---

2. useRef

공식 문서에서의 정의 `useRef` is a React Hook that lets you reference a value that’s not needed for rendering.

 

리액트 공식 문서에서는 `useRef`는 렌더링이 필요하지 않은 값을 참조할 수 있도록 하는 리액트 훅이라고 정의되어 있습니다. 주로 함수형 컴포넌트에서 DOM 요소에 직접 접근하거나, 저장 공간(변수 관리)를 위해 사용됩니다.

 

import { useEffect, useRef } from 'react'
import './App.css';

function App() {
  const inputRef = useRef();

  useEffect(() => {
    console.log(inputRef);
    inputRef.current.focus();
  }, [])

  const loginAlert = () => {
    alert(`환영합니다. ${inputRef.current.value}`);
    inputRef.current.focus();
  }
  return (
    <div className="App">
      <header className="App-header">
        <input ref={inputRef} type="text" placeholder="id"/>
        <button onClick={loginAlert}>Login</button>
      </header>
  </div>
  );
}

export default App;

DOM 요소에 접근하는 예시로는 유저가 input 요소를 클릭하지 않아도 화면이 렌더링될 때 자동으로 포커스를 주고 싶을 때 사용합니다.

 

또한 useRef는 렌더링과 무관한 값을 저장하고 변경하기 위해 사용합니다. 컴포넌트에서 저장 공간, 변수 관리라고 하면 state를 먼저 떠올릴 수 있습니다. 이 state의 값을 바꾸기 위해 useState 훅을 사용하는데, useState를 이용하면 state 값이 변할 때마다 컴포넌트가 리렌더링 되면서 컴포넌트 내부 변수들이 초기화 됩니다. state 대신 ref 안에 값을 저장하면, ref안에 있는 값이 아무리 변해도 컴포넌트가 리렌더링되지 않으면서 변수의 값을 유지할 수 있습니다.

import React, { useRef, useState } from 'react';

function MyComponent() {
  const renderCount = useRef(0);

  // 컴포넌트가 렌더링될 때마다 renderCount가 증가하지만,
  // 이는 렌더링과 무관하게 변경됩니다.
  renderCount.current++;

  return <div>렌더링 횟수: {renderCount.current}</div>;
}