리액트(React) - Virtual DOM과 선언형

안녕하세요. 빵빵아빠입니다. 오늘은 React에 대한 첫 이야기로 선언형과 Virtual DOM에 대해서 알아보도록 하겠습니다. 앞으로 작성해나갈 이야기는 웹의 기초, HTML, CSS, JAVASCRIPT를 알고 있다고 가정하고 있습니다.

 

1. React란?

Facebook에서 제공하는 자바스크립트 프론트엔드 UI 라이브러리입니다.

기존에 많이 사용하던 Angular는 웹프레임워크라고 할 수 있습니다. Angular는 ui뿐만 아니라 웹을 만드는데 필요한 요소를 대부분 다 가지고 있기 때문에 추가 라이브러리 없이도 웹을 대부분 만들 수 있지만 그 만큼 무겁다는 단점이 있습니다. React는 대신 웹을 만드는데 필요한 도구를 모두 제공하지 않기 때문에 가볍게 사용 할 수 있으며, 필요한 라이브러리들을 추가로 선택해서 사용할 수 있다는 장점이 있습니다.

 

2. React의 특징

React 홈페이지를 접속하면 선언형, 컴포넌트 기반, 한번 배워서 어디서나 사용하기 3가지를 특징으로 제시하고 있습니다. 선언형은 메인에서 아주 간단하게 설명되어 있지만, 사실은 꽤 복잡한 이야기이기 때문에 선언형과 Virtual DOM에 대해서만 설명해드리도록하겠습니다.

React 홈페이지에 써있는 선언형을 읽어보면 다음과 같습니다.

"React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다."

 

위의 이야기를 직설적으로 해석하면 다음과 같습니다. "자바스크립트로 ui를 그냥 만들면 힘드니까, JSX로 구조만 설계를 해라. 그러면 우리는 Virtual DOM 으로 바뀐 부분만 찾아서 실제 DOM을 업데이트 하겠다. 선언형 뷰를 쓰면, 일반적인 뷰보다 쉽게 코드를 만들고 디버깅 할 수 있다" 이해하기 위해서는 선언형, JSX, Virtual DOM, DOM 이 무엇인지 알아야합니다.

 

 

1. 선언형

선언형을 알기 위해선 선언형과 명령형 프로그래밍의 차이를 알아야 합니다. 명령형은 어떻게(How)를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. 선언형은 무엇(What)을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태입니다. 

 

명령형에서 array의 값을 2배로 만드는 방법

function double (arr) {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(arr[i] * 2)
    }
    return (result);
}

선언형에서 array의 값을 2배로 만드는 방법

function double (arr) {
    return (arr.map(x => x * 2));
}

React에서는 아래와같은 선언형을 추구한다는 것은 JSX라는 것을 통해서 알 수 있습니다. JSX는 HTML과 비슷한 문법을 통해 javascript에서 html을 생성하는 방법입니다.

 

 

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

 

이 차이를 보면, React에서는 일반 Javascript보다 편하게 HTML을 바꿀 수 있음을 알 수 있습니다. 일반 Javascript에서는 실제 DOM을 변경 했지만, React는 Virtual DOM을 변경하고 있다는 차이가 있습니다. 

우선 DOM(Document Object Model)이란 객체 지향 모델로써 구조화된 문서를 표현하는 형식입니다. HTML 문서의 요소를 제어하기 위해 웹브라우저에서 처음 지원되었으며 아래와 같이 Tree 구조로 표현 할 수 있습니다. 웹 브라우저는 HTML 문서를 읽어들인 후 DOM Tree를 생성하여, CSS와 합하여 Render Tree를 만들어서 렌더링하여 우리에게 보여주는 일을 합니다.

Javascript는 이 DOM을 생성,읽기,변경,삭제 등을 해서 렌더링을 바꾸는 형태입니다. 사용자와의 인터렉션이 많아질수록 처리해야할 이벤트, 상태 등 많은 것이 복잡해집니다. AngularJS같은 경우에는 Javascript와 DOM을 MVC형태로 바인딩하여 자동으로 업데이트 하는 방식을 취하고 있습니다.

여기에서 React는 상태가 변경되면 DOM을 업데이트 하지 않고 새로 만드는 방식으로 하고 있습니다. 모든 DOM을 날려버린다면, 굉장히 느리겠지만 Virtual DOM이란걸 사용해서 변경되는 부분만 찾아서 수정을 가하는 방식을 사용하여 빠른 속도를 만들어 냅니다. 

React에 나와있는 Virtual DOM의 설명입니다. DOM의 표현을 메모리상에 저장하여 상태 변경시 페이스북이 짜놓은 재조정(Reconciliation)을 통해 효율적으로 갱신되는 시스템이라고 보시면 됩니다. 여기서 "이 접근방식이 React의 선언적 API를 가능하게 합니다."라고 밝히고 있습니다.

여기까지, React에서 메인에 짧게 적어둔 선언형의 의미에 대해서 알아봤습니다.

감사합니다.