React를 활용한 웹 어플리케이션 최적화: React.memo와 Virtual DOM의 이해

deviantce master

•

React의 효율적인 웹 어플리케이션 성능 관리

React를 이용하여 웹 어플리케이션을 개발하고 최적화하는 방법에는 여러가지가 있습니다. 이 중 가장 중요한 방법 중 하나는 컴포넌트의 재호출을 최소화하는 것입니다. 다시 말해, 상태가 변경되지 않은 컴포넌트는 재호출되지 않아야 합니다.

useState와 useEffect를 이용한 성능 최적화

이를 위해 React에서는 useState와 useEffect와 같은 Hook을 제공하고 있습니다. useState를 사용하여 상태를 관리하고, useEffect를 사용하여 상태가 변경될 때만 특정 동작을 실행하도록 설정할 수 있습니다.

여기서는 간단한 카운터 컴포넌트를 예시로 들어 소스 코드를 살펴보겠습니다.

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

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    

      
You clicked {count} times

      
    

  );
}

export default Counter;

여기서는 useState를 통해 count라는 상태를 관리하고 있습니다. 또한 useEffect를 이용하여 count 값이 변경될 때마다 문서의 타이틀을 변경하고 있습니다. 따라서 count 값이 변경되지 않는다면 useEffect 내부의 작업은 실행되지 않습니다.

이처럼 React의 Hook을 적절히 활용하면 상태 값이 변경되지 않는 컴포넌트의 불필요한 렌더링을 방지하고, 따라서 성능을 효율적으로 관리할 수 있습니다.

웹 어플리케이션 최적화의 필요성

웹 어플리케이션의 성능 최적화는 사용자 경험, 서버 리소스 관리, 그리고 코드 유지 보수 측면에서 매우 중요합니다.

사용자 경험의 측면에서 본 최적화의 중요성

웹 어플리케이션의 반응 속도는 사용자 경험에 큰 영향을 미칩니다. 사용자는 빠르게 반응하는 웹 어플리케이션을 선호하며, 이는 직결적으로 사용자의 만족도와 잔류 시간, 그리고 전환율에 영향을 미칩니다.

서버 리소스 관리 측면에서 본 최적화의 중요성

최적화된 웹 어플리케이션은 필요 이상의 서버 리소스를 소비하지 않습니다. 이는 서버 비용을 절약해주며, 동시에 더 많은 사용자를 수용할 수 있도록 해줍니다.

코드 유지 보수 측면에서 본 최적화의 중요성

성능 최적화는 코드의 효율성과 가독성을 향상시켜, 코드 유지 보수를 용이하게 합니다. 리액트의 경우, useMemo나 useCallback과 같은 Hook을 사용하여 불필요한 연산을 줄이거나, 컴포넌트의 재 렌더링을 방지함으로써 이를 달성할 수 있습니다.


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

function Example() {
  const [count, setCount] = useState(0);
  
  const expensiveComputation = useMemo(() => {
    let i = 0;
    while (i < 1000000000) i++;
    return count * 2;
  }, [count]);

  return (
    

      
{expensiveComputation}

      
    

  );
}

export default Example;

이 코드 예제에서는 useMemo를 사용하여 count 값이 변경될 때만 비싼 연산을 수행하도록 합니다. count 값이 변경되지 않는다면, 이전에 메모이제이션된 결과를 재사용하므로 연산을 생략할 수 있습니다.

React.memo의 개념 및 활용법

React.memo는 React 라이브러리의 고오급 기능 중 하나로, 컴포넌트의 불필요한 렌더링을 방지하여 성능을 최적화하는 데 사용됩니다.

React.memo의 기본 원리

React.memo는 컴포넌트의 props가 변경되었을 때만 렌더링을 수행합니다. 즉, 동일한 props로 다시 렌더링을 요청받으면 마지막 렌더링 결과를 재사용하여 불필요한 렌더링을 방지하는 메모이제이션 기능을 제공 및 활용합니다.

React.memo의 활용 예제

React.memo의 사용법은 간단합니다. React.memo를 사용하려는 컴포넌트를 React.memo 함수로 감싸기만 하면 됩니다. 이를 통해 함수형 컴포넌트의 리렌더링을 최적화할 수 있습니다.


import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

export default MyComponent;

이렇게 감싸진 컴포넌트는 props가 변경되었을 때만 재렌더링되므로, 상위 컴포넌트가 업데이트 되어도 불필요하게 렌더링 되거나 리소스가 낭비되는 것을 방지할 수 있습니다.

React.memo는 복잡한 연산을 필요로 하는 컴포넌트나, 동일한 props로 많은 렌더링이 이루어지는 컴포넌트를 최적화하는데 효과적입니다.

Virtual DOM의 개념

Virtual DOM은 실제 DOM의 가벼운 복사본으로, 상태 변경 시 모든 UI를 새로 렌더링하지 않고, 변경 부분만 식별하여 그 부분만 업데이트하는 효율적인 방식입니다.

실제 DOM과 Virtual DOM의 차이

실제 DOM은 브라우저가 HTML을 해석하여 생성하는 객체 기반의 표현으로, HTML의 태그를 객체로 변환하여 이 객체의 구조와 속성을 변경함으로써 웹 페이지를 다룹니다.

반면에, Virtual DOM은 메모리에 DOM의 사본을 유지하면서, 실제 DOM과 비교하여 필요한 변경 사항만 실제 DOM에 반영합니다.

Virtual DOM의 동작 원리

Virtual DOM의 동작 과정은 다음과 같습니다.
1. 전체 UI를 Virtual DOM에 렌더링합니다.
2. 상태가 변경되면 새로운 Virtual DOM에 다시 렌더링합니다.
3. 새로운 Virtual DOM과 이전 Virtual DOM을 비교합니다. 이 비교 과정을 “diffing”이라고 합니다.
4. 변경된 부분만 실제 DOM에 업데이트합니다. 이 과정을 “reconciliation”이라고 합니다.





// 이전 Virtual DOM
const oldVdom = 
Hello, world
;

// 실제 DOM에 렌더링
ReactDOM.render(oldVdom, document.getElementById('app-root'));

// 변경사항 적용
const newVdom = 
Goodbye, world
;
// 새로운 Virtual DOM을 이전 Virtual DOM과 비교하고, 실제 DOM에 필요한 변경만 반영
ReactDOM.render(newVdom, document.getElementById('app-root'));

이 코드 예제에서는, 먼저 이전 Virtual DOM에 ‘Hello, world’를 렌더링합니다. 그리고 상태가 변경되어 ‘Goodbye, world’를 새로운 Virtual DOM에 렌더링하고, 이전 Virtual DOM과 비교하여 변경된 부분만 실제 DOM에 반영하게 됩니다.

Virtual DOM을 이용한 웹 어플리케이션 성능 향상

Virtual DOM 사용을 통해 웹 어플리케이션의 렌더링 성능을 크게 향상시킬 수 있습니다. 상태의 변화가 생길 때마다 실제 DOM을 계속 업데이트 하는 것이 아니라, 변경 사항만 찾아 해당 부분만 업데이트하기 때문입니다.

Virtual DOM을 적용한 예제

가장 대표적인 Virtual DOM이 적용된 예제는 React.js 입니다.


class MyComponent extends React.Component {
  state = {
    text: 'Hello, world!',
  }

  handleClick = () => {
    this.setState({ text: 'Goodbye, world!' });
  }

  render() {
    return (
      

        
{this.state.text}

        
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

위 예제에서는 React 컴포넌트에 state를 사용하여 ‘Hello, world!’를 렌더링 합니다. 그리고 버튼을 클릭하면 state가 ‘Goodbye, world!’로 변경되며, 이 때 Virtual DOM이 이전 상태와 비교하여 달라진 부분만 실제 DOM에 반영합니다.

Virtual DOM 적용 시 주의점

효과적인 Virtual DOM 사용을 위해 몇 가지 주요 사항을 기억해야 합니다.
– 순수 컴포넌트: 컴포넌트는 같은 props에 대해 항상 같은 결과를 반환해야 합니다. 변경 가능한 데이터로부터 렌더링하지 않아야 합니다.
– key 속성: React에서는 배열을 렌더링할 때 각 항목에 ‘key’ 속성을 설정해야 합니다. 이를 통해 React가 업데이트를 위한 어떤 항목을 추적할지 알 수 있습니다.


const itemList = items.map((item) =>
  // 여기서 key는 item.id와 같은 고유값 여야 합니다.
  
  • {item.name}
    • 
);

    React.memo와 Virtual DOM의 장단점 비교

    React.memo와 Virtual DOM 모두 React에서 성능 향상을 위한 도구입니다. 두 기능이 비슷하게 동작하며 차이점을 이해하는 것이 중요합니다.

    성능 향상 측면에서의 비교

    Virtual DOM은 변경된 부분만 실제 DOM에 반영하는 방식으로 빠른 렌더링 성능을 제공합니다.

    반면에, React.memo는 특히 props가 변경되지 않았을 때 같은 컴포넌트의 렌더링 결과를 재사용함으로써 성능을 향상시킵니다.

    
// 이전과 동일한 props로 재렌더링을 방지하기 위해 여기에 memo를 사용합니다.
const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

    코드 유지 보수 측면에서의 비교

    Virtual DOM은 개발자가 별도의 최적화 작업 없이도 자동으로 최적화되는 반면, React.memo는 개발자가 어떤 컴포넌트가 재렌더링될 필요가 없는지 명시적으로 지시해야 하므로 관리해야 할 부분이 늘어납니다. 그러나 컴포넌트가 매우 복잡하거나 렌더링 비용이 높은 경우, React.memo를 사용하여 불필요한 렌더링을 줄이는 것이 효과적일 수 있습니다.

    
const isEqual = (prevProps, nextProps) => {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
};

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render using props */
}, isEqual);

    위 코드에서 React.memo의 두 번째 인자로 비교 함수를 전달할 수 있습니다. 이 함수는 이전 props와 새로운 props를 인자로 받아 두 값이 동일한지 비교합니다.

    실제 사례를 통한 React.memo와 Virtual DOM의 활용

    대규모 웹 어플리케이션에서의 활용 사례

    실제 대규모의 웹 어플리케이션에 React.memo와 Virtual DOM을 적용했을 때의 성능 향상을 확인할 수 있는 사례입니다.

    
// 최적화 이전
function TodoItem(props) {
  return (
    
    
      
      
    
    
  );
}

// 최적화 이후
const TodoItem = React.memo(function TodoItem(props) {
  return (
    
    
      
      
    
    
  );
});

    TodoItem 컴포넌트가 많은 할 일 목록 애플리케이션에서, 할 일 항목의 변경마다 모든 TodoItem 컴포넌트가 재렌더링 되는 상황에서 React.memo를 적용하면, 변경된 항목만 재렌더링되어 성능이 크게 향상됩니다.

    최적화 전후의 성능 비교

    최적화 이전에는 할 일 항목이 변경될 때마다 모든 TodoItem 컴포넌트가 재렌더링되므로, 할 일 항목이 많아질수록 렌더링 성능이 저하됩니다.

    하지만 React.memo를 통한 최적화 이후에는 변경되지 않은 컴포넌트는 재렌더링되지 않으므로, 할 일 항목의 개수에 상관없이 일정한 렌더링 성능을 유지할 수 있습니다. 이로써 수천 개의 컴포넌트를 관리하는 대규모 어플리케이션에서 더욱 효율적인 성능을 기대할 수 있습니다.

    React.memo와 Virtual DOM을 함께 사용할 때의 이점

    React.memo와 Virtual DOM이 함께 작동하면, 서로 보완적인 성능 향상을 촉진하게 됩니다.

    함께 사용하면서 겪은 어려움 및 해결 방법

    React.memo는 고비용 렌더링 컴포넌트에 대한 성능 향상에 상당히 유용하지만, 모든 경우에 유용하지는 않습니다. 컴포넌트가 가볍고 빠르게 업데이트 될 경우, React.memo는 필요 이상으로 메모리를 차지하게 되어 성능 저하를 야기할 수 있습니다. 이 경우에는, React.memo의 상태보다 Virtual DOM이 더 적합할 수 있습니다.

    함께 사용하는 것이 적절한 경우

    React.memo와 Virtual DOM를 함께 사용하는 것은 성능이 저하될 수 있는 기존의 자바스크립트 비교 연산을 효율적으로 대체할 수 있습니다.

    
// Virtual DOM를 사용하는 기본 컴포넌트
function MyComponent(props) {
  return 
    {props.value}
    ;
}

// React.memo를 사용하여 최적화한 컴포넌트
const MyOptimizedComponent = React.memo(MyComponent);

    위 코드에서 MyComponent는 props.value가 변경될 때마다 재렌더링됩니다. 하지만 MyOptimizedComponent는 이전과 동일한 props.value로 재렌더링을 방지합니다. 이렇게 함으로써 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있습니다.

    마무리: React를 활용한 웹 어플리케이션 최적화의 중요성

    성능 최적화는 웹 어플리케이션의 사용자 경험 향상에 중요한 역할을 합니다. React에서는 Virtual DOM의 도입과 함께 React.memo 같은 최적화 도구를 제공하여 개발자들이 효과적으로 성능을 향상시킬 수 있게 도와줍니다.

    
// 성능 향상이 필요한 함수형 컴포넌트
function MyComponent(props) {
    let sum = 0;
    for (let i = 0; i < props.largeArray.length; i++) {
        sum += props.largeArray[i];
    }

    return 
    {sum}
    ;
}

// React.memo를 사용해 최적화한 컴포넌트
const MyOptimizedComponent = React.memo(MyComponent);

    위 예제에서 largeArray prop이 변경되지 않을 때, MyComponent는 불필요하게 계산을 반복하지만, MyOptimizedComponent는 이전의 계산 결과를 재사용하여 이런 비효율을 방지합니다.

    테크닉들을 적절히 활용하면 React 앱의 성능을 크게 향상시킬 수 있습니다. 그러나 무분별하게 사용하는 것보다는 각 상황에 맞게 사용하는 것이 중요합니다. 엔드 유저에게 더 나은 경험을 제공하고, 웹 애플리케이션의 성능 및 반응성을 높이기 위해 React의 이러한 최적화 도구를 적극적으로 활용하는 것이 중요합니다.

    참고 자료 및 추가 학습 자료

    React의 최적화에 대한 더 깊은 이해를 위해 아래 참고 자료들 및 추가 학습 자료들을 검토할 수 있습니다.

    공식 React Documentation

    [React Optimization](https://reactjs.org/docs/optimizing-performance.html)에서는 React의 최적화에 대한 자세한 내용을 찾아볼 수 있습니다. 특히 React.memo, Virtual DOM 등을 적절하게 활용하는 방법에 대한 정보가 포함되어 있습니다.

    인강 및 온라인 코스

    React를 공부하면서 직접 코딩을 해보고 싶다면, 각종 인강 사이트에서 여러 가지 수업이 제공되고 있습니다. 이 중 [Advanced React](https://advancedreact.com/)는 효율적인 컴포넌트 렌더링을 위한 React의 기법들을 일반적인 문제 사례와 함께 설명해 주는 것으로 잘 알려져 있습니다.

    블로그 및 개발자 커뮤니티

    개발자들과 지식을 공유하고 서로 질문을 하며 배울 수 있는 곳과, React와 관련된 여러 토픽에 대해 깊이있는 글을 제공하는 블로그도 많습니다. 예를 들어, [Medium](https://medium.com/)의 여러 React에 관한 글이나 [Stackoverflow](https://stackoverflow.com/)의 질문들은 많은 정보를 얻을 수 있는 좋은 참고 자료가 될 수 있습니다.

    Leave a Comment