리액트의 대하여

리액트의 개념과 특징은 무엇일까?

리액트는 페이스북을 개발할 때 사용한 UI구축을 위한 기술이며, 공개 소프트웨어입니다.

리액트의는 '화면 출력에 특화된 프레임워크'입니다.

[‘MVC(Model View Controller)’ 패턴에서 ‘V(View)’에만 집중]

 

1. 컴포넌트로 화면 구성을 효율적으로 할 수 있다.

조립하기 쉬운 형태를 가지고 있어서 원하는 화면을 쉽게 만들 수 있다.

재사용성이 뛰어납니다.

 

 

2. JSX문법

JavaScript XML의 줄인말로 '자바스크립트에 XML을 추가한 확장현 문법'

XML또한 HTML의 표현법을 확장한 문법이므로 자바스크립트와 html을 안다면 JSX도 쉽게 이해할 수 있을 것입니다.

기존에 자바스트립트와 html을 분리해서 작성하던 번거로운 방식 -> JSX 하나에서 동시 작성/수정 가능

 

[JSX 예시]

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)

 

[리액트 엔진or 바벨이 JSX를 컴파일했을 때]

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

 

리액트를 사용하게 되면 이런 과정들을 알필요는 없이 빠르게 구성해준다.

개발자는 JSX만 작성하고, 리액트 엔진은 JSX를 기존 자바스크립트로 해석해주는 역할만 한다.

이를 '선언형 화면(Declareative View)' 기술이라 부릅니다.

이처럼 JSX는 한눈에 알아보기 쉬운 개발환경을 만들어줘서 개발자가 화면 구성에만 집중할 수 있도록 도와준다.

 

JSX는 형태가  html과 같은데

이는 유저에세 보여주고 싶은 최정적인 view라고 할 수 있습니다.

개발자는 jsx를 통해 결과물에 직관적으로 도달할 수 있습니다.

이는 예측가능한 개발을 만들어 줄 뿐 아니라 유지보수, 협업 등에서도 엄청난 강점을 발휘합니다.

 

 

3. Virtual DOM

결국 위의 모든 것을 가능하게 만들어주는 것, 그리고 React의 가장 큰 특징!

대부분의 게임 엔진은 다음 장면에 필요한 화면을 미리 그려두는 방법으로 화면을 빠르게 전환합니다.

이를 도입하여 '다음에 나타날 화면의 일부(노드)를 미리 그려놓고 변경된 화면의 일부(노드)만 수정하는'

가상 화면(Virtual DOM) 기술을 만들었습니다.

 

가상 돔? (Virtual DOM) DOM 자체가 추상화 개념인데, 거기에 한번 더 추상화를 한 것이 가상 DOM 입니다. 가상 돔은 변화를 가상 돔에서 미리 인지해 변화시킵니다. 이 작업은 실제 DOM이 아니기 때문에 렌더링도 되지 않고 연산 비용이 비교적 실제 DOM 보다는 적습니다. 그 가상 DOM의 변화를 마지막에 실제 DOM에게 던져주어, 모든 변화를 한번에 렌더링 되게 합니다. 그런데 이러한 생각은 우리는 충분히 가상 DOM을 사용하지 않고도 할 수 있었을 텐데, 왜 굳이 가상 DOM을 쓰는걸까요? 만약 직접 DOM을 업데이트하게 된다면 그 부분만 업데이트하기 위해서 업데이트 하지 않은 부분과 업데이트된 부분을 알고 있어야 하는데,  가상 돔은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시켜줍니다. 또한, 변경하려는 DOM이 변경되었는지, 변경되지 않았는지에 대한 각 동기화 정보를 알고 있을 필요가 없음과 동시에 하나로 묶어서 작업해주기 때문이죠. 결론:  가상 DOM을 사용하는 이유는, 실제 DOM을 직접 변경할 수는 있지만, 그 양이 많아지고 복잡해질 수록 작업의 연산비용이 비싸지기 때문에, 가상 돔에서 미리 최적화를 한 번 해준다는 것 입니다. 그래서 성능면에서 더 좋습니다.

 

[virtual dom 예시/추가설명]

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

이 HelloMessage 클래스는 만약 this.props.name이 Alex이고, this.state.chatName이 Thom이라면, “Hello Alex”, “I am Jenny” 라는 글자를 유저에게 보여주는 컴포넌트입니다. 그런데 만약 여기서 this.props.name은 그대로이고, this.state.chatName은 “Mary”로 바뀌었다면 어떻게 될까요?

 

“Hello Alex”, “I am Mary”라는 결과가 브라우저에 나타날 것이라는 건 쉽게 짐작할 수 있죠?

하지만 React는 여기서 한번의 작업 과정을 더 거칩니다.

그리고 이곳이 바로 Virtual DOM이 자신의 역할을 수행하는 부분입니다.

 

일단 React 컴포넌트는 render를 다시 호출하여 새로운 결과값을 return합니다.

그런데 이 return 값은 바로 DOM에 반영되지 않습니다. 바로 브라우저에 렌더링되지 않는다는 것이죠.

앞에서 React안에 있는 div들은 진짜 html이 아니라 Babel에 의해 컴파일되는 JSX라고 설명했었죠?

 

render함수가 return하는 것은 새로운 Virtual DOM을 만들기 위한 재료입니다.

React는 새로운 return 값을 가지고 새로운 Virtual DOM을 만듭니다.

그리고 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 어떤 부분이 달라졌는지 찾아냅니다.

그리고 바뀐 부분만 진짜 DOM에 적용합니다.

 

그러면 브라우저는 이 DOM을 해석하여 유저에게 새로운 화면을 보여주게 되죠.

다시 위의 코드를 통해 설명해 볼까요?

컴포넌트가 첫번째 render 함수를 호출하면서 “<div>Hello Alex</div><div>I am Jenny</div>”라는 값을 return 했다고 가정합시다. 그러면 유저는 “Hello Alex”, “I am Jenny”라는 값을 보게 됩니다. 그런데 컴포넌트의 this.state.chatName가 Mary로 바뀌어서 render 함수가 다시 호출되었습니다. 그러면 컴포넌트는 “<div>Hello Alex</div><div>I am Marry</div>”을 다시 return합니다.

 

그런데 여기서 this.state.chatName(Jenny -> Mary)는 변경되었지만, this.props.name(Alex)은 그대로입니다.

Virtual DOM은 비교 작업을 통해서 이것을 찾아냅니다.

그리고 최종적으로는 진짜 DOM에서 “<div>I am Jenny</div>”만 “<div>I am Mary</div>”로 변경합니다.

왜 이렇게 번거로운 비교작업을 거치는 것일까요? 바로 DOM을 직접 바꾸면 안될까요? 앞에서 설명했듯이, 브라우저에게 DOM을 해석하고 렌더링 하는 것은 굉장히 비싼 작업입니다.

 

Virtual DOM은 그 작업을 미리 최적화시켜줄 뿐만 아니라, 컴포넌트 단위로 묶어서 관리할 수 있게 해주죠. 

Virtual DOM은 단순한 DOM 조작 도구가 아니라 컴포넌트 단위로 움직이는 Declarative한 개발을 구현하기 위해 도입된 것입니다. 컴포넌트 단위의 개발을 구현하기 위해 보다 효율적인 DOM 조작 방식을 도입할 필요가 있었던 것이죠. 만약 Virtual DOM이 없었다면 React의 컴포넌트 철학은 제대로 구현될 수 없었을 것입니다. Virtual DOM의 코어 알고리즘을 굳이 공부할 필요는 없지만, React를 사용하시는 분이라면 적어도 왜 Virtual DOM을 사용하는 것이며 어떤 작업을 수행하는지는 꼭 이해하고 가셔야 합니다.

 

 

 

참고:

medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2

기초부터 배우는 React — Part 1

velog.io/@undefined/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

리액트에 대하여

medium.com/@RianCommunity/react%EC%9D%98-%ED%83%84%EC%83%9D%EB%B0%B0%EA%B2%BD%EA%B3%BC-%ED%8A%B9%EC%A7%95-4190d47a28f

React: #1 React의 탄생배경과 특징