가상 DOM 및 참조를 사용한 효율적인 DOM 조작

빠르고 반응성이 뛰어난 웹사이트의 비결
즐겨찾는 웹사이트가 왜 그토록 빠르고 반응이 빠른지 궁금한 적이 있습니까? 그것은 모두 DOM 조작을 처리하는 방법으로 귀결됩니다. DOM(문서 개체 모델)은 웹 페이지를 구조화된 트리로 나타냅니다. 전통적으로 우리는 getElementById 또는 RemoveChild와 같은 JavaScript 메소드를 사용하여 변경했습니다. 그러나 웹사이트가 더욱 복잡해짐에 따라 이러한 방법으로 인해 작업 속도가 느려질 수 있습니다. 판도를 바꾸는 가상 DOM을 갖춘 React를 만나보세요.

전통적인 DOM 조작에 대한 도전
DOM을 수많은 가지가 있는 거대한 나무로 생각해보세요. 10개 목록의 첫 번째 항목을 업데이트하는 등 무언가를 변경하려고 할 때마다 결국 전체 트리가 흔들리게 됩니다. 특히 웹페이지가 더욱 복잡해지면 속도가 느려질 수 있습니다. 브랜치(요소)가 많을수록 모든 것을 원활하게 실행하기가 더 어려워집니다.

React의 솔루션: 가상 DOM
React는 HTML DOM의 경량 복사본인 Virtual DOM을 통해 이 문제를 해결합니다. 변경 사항은 먼저 Virtual DOM에 적용된 다음 React는 이러한 변경 사항을 반영하기 위해 실제 DOM을 효율적으로 업데이트합니다. 조정이라고 하는 이 프로세스를 통해 DOM의 필요한 부분만 업데이트되어 성능이 크게 향상됩니다.

가상 DOM 작동 방식
React에서 JSX 요소를 렌더링하면 전체 Virtual DOM이 업데이트됩니다. 비효율적으로 들릴 수도 있지만 실제 DOM을 직접 조작하는 것보다 빠릅니다. 이유는 다음과 같습니다. React는 업데이트를 하기 전에 Virtual DOM의 복사본을 생성합니다. 그런 다음 Diffing이라는 프로세스를 사용하여 업데이트된 Virtual DOM을 이 복사본과 비교합니다. 이 비교를 통해 변경된 특정 요소를 식별하고 React는 실제 DOM에 있는 해당 요소만 업데이트합니다.

Under the Hood: React의 Diffing 알고리즘
React의 Diffing 알고리즘은 효율적인 DOM 업데이트의 비결입니다. 이 알고리즘은 두 버전의 Virtual DOM을 비교하고 이를 동기화하는 데 필요한 최소한의 변경 사항을 적용합니다.
두 트리의 루트 요소의 유형이 다른 경우 React는 전체 트리를 다시 빌드합니다. 예를 들어

를 a로 변경하면 React가 트리를 처음부터 해체하고 다시 작성하게 됩니다.

<div>
  <Tree/>
</div>
<span>
  <Tree/>
</span>

루트 요소(div와span)가 다르기 때문에 React는 전체 트리를 재구성합니다.

동일 요소 유형

<span id="span1" />
<span id="span2" />

여기서 React는 id 속성만 업데이트하고 나머지 요소는 그대로 둡니다.

하위 요소 비교

React는 하위 요소 업데이트도 최적화합니다. 다음 목록을 고려하십시오.

<ul>
  <li>Child1</li>
  <li>Child2</li>
</ul>

<ul>
  <li>Child1</li>
  <li>Child2</li>
  <li>Child3</li>
</ul>

React는 Child3를 새로운 것으로 보고 그에 따라 업데이트합니다. 그러나 처음에 새 요소가 추가되면 React는 전체 목록을 다시 빌드할 수 있습니다. 열쇠가 들어가는 곳입니다.
업데이트 최적화에서 키의 역할

키는 React가 어떤 요소가 변경, 추가 또는 제거되었는지 추적하는 데 도움이 됩니다. 형제 간에 고유해야 하며 렌더링 전체에서 안정적이어야 합니다.

<ul>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

<ul>
  <li key="100">Child3</li>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

이 예에서 React는 Child3이 새로운 것임을 알고 목록을 다시 작성하지 않고도 효율적으로 목록을 업데이트합니다.

Ref를 사용하여 DOM 조작
React가 가상 DOM을 사용하여 DOM 업데이트를 최적화하는 동안 입력에 집중하거나 특정 요소로 스크롤하거나 요소의 크기를 측정하는 등 DOM 요소를 직접 조작해야 하는 시나리오가 있습니다. React는 이러한 목적으로 useRef Hook을 제공합니다. ref를 생성하고 ref 속성을 통해 DOM 요소에 연결하면 DOM 노드에 직접 액세스할 수 있습니다. useRef 후크는 현재 속성이 있는 객체를 반환합니다. 이 속성은 처음에는 null이지만 렌더링되면 DOM 노드가 할당됩니다. 이를 통해 요소에서 직접 기본 DOM 메소드를 호출하여 특정 상호작용에 대한 제어를 강화할 수 있습니다. 예를 들어 myRef.current.scrollIntoView()를 사용하여 요소를 스크롤하여 볼 수 있습니다.

예: 색상 변경 Div
이것이 실제로 작동하는 모습을 볼 수 있는 재미있는 예제를 만들어 보겠습니다. 버튼을 클릭하면 색상이 변하는 div를 만들어 보겠습니다. 클래스 기반 구성요소와 참조를 사용하여 div의 스타일을 직접 조작하겠습니다.

<div id="root"></div>

const root = ReactDOM.createRoot(document.getElementById('root'));

class ColorChanger extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
    this.colors = ['#FFCDD2', '#C8E6C9', '#BBDEFB', '#FFF9C4', '#D1C4E9'];
    this.state = { colorIndex: 0 };
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor() {
    const nextColorIndex = (this.state.colorIndex + 1) % this.colors.length;
    this.setState({ colorIndex: nextColorIndex });
    this.divRef.current.style.backgroundColor = this.colors[nextColorIndex];
  }

  render() {
    return (
      <div className="container">
        <div
          ref={this.divRef}
          className="color-box"
          style={{
            backgroundColor: this.colors[this.state.colorIndex],
          }}
        ></div>
        <button onClick={this.changeColor}>Change Color</button>
      </div>
    );
  }
}

root.render(<ColorChanger />);

설명

루트 생성: React 앱의 루트는 ReactDOM.createRoot(document.getElementById('root'))를 사용하여 생성됩니다.
ColorChanger 구성요소:
생성자: React.createRef()로 참조를 초기화하고, 색상 배열을 설정하고, 색상 인덱스를 추적하기 위한 상태를 초기화합니다.
ChangeColor 메소드: DOM을 직접 조작하여 다음 색상 인덱스를 계산하고 상태를 업데이트하며 div의 배경색을 변경합니다.
렌더링 방법: div에 참조를 연결하고 버튼의 onClick 핸들러를changeColor로 설정하여 div와 버튼을 렌더링합니다.
구성 요소 렌더링: ColorChanger 구성 요소가 루트 요소로 렌더링됩니다.
결론
React의 Virtual DOM은 웹 개발의 판도를 바꿔 우리 앱을 더욱 효율적이고 반응적으로 만들어줍니다. Virtual DOM을 활용함으로써 React는 DOM의 필요한 부분만 업데이트되어 성능을 향상시킵니다. React의 Diffing 알고리즘과 키 작동 방식을 이해하면 더 부드럽고 빠른 React 애플리케이션을 만드는 데 도움이 될 수 있습니다. 그리고 정확한 제어가 필요할 때 React의 참조가 DOM과 직접 상호 작용하는 데 도움이 됩니다. Virtual DOM의 강력한 기능을 활용하여 웹 개발 기술을 한 단계 끌어올리세요!

위 내용은 가상 DOM 및 참조를 사용한 효율적인 DOM 조작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!