React 란 무엇 일까?

요즘 프론트앤드 자바스크립트 프레임워크 중에 React, Vue.js, Angular가 각광을 받고 있습니다. 그 중에서도 리액트 사용자들이 급증하고 있는 것을 여러 매체를 통해 알 수 있습니다.  여전히 앵귤러의 사용자들도 여전히 많지만 리액트의 성장률은 단연 돋보입니다.

리액트가 어떤 매력이 있는지 몸소 느껴보기 위해 공부 해보기로 했습니다. 일단 리액트가 무엇 인지부터 알아 보겠습니다.

React 란?

리액트는 2013년 Facebook 에서 오픈소스로 내놓은 자바스크립트의 라이브러리입니다. 리액트는 뷰 라이브러리이다. 

즉, 기존의 다른 프레임워크들과 다르게 뷰에만 집중 합니다. 다시 한 번 설명 하면 Angular나 Vue.js 같은 경우는 MVC, MVVM의 패턴을 사용 하지만 React 같은 경우는 다릅니다. 단순히 뷰만 조작합니다. DOM 객체의 이벤트에 대한 반응, 업데이트에만 관심이 있습니다. React는 왜 라이브러리일까? 이런 이유 때문인걸 알 수 있었습니다.

React 특징

React의 특징을 알아보면 어떻게 해서 뷰에만 관심이 있다는 건지 DOM 객체 성능이 왜 좋다는 건지 조금이나마 와닿게 되실겁니다.

• JSX
• Virtual DOM
• 단방향 데이터 흐름

(1) JSX

JSX 는 javascript 와 XML 입니다. javascript 안에서 마크업 언어를 더 정확히 말하면 React Component 안에서 HTML과 유사한 문법을 사용 할 수 있습니다. 기존에 자바스크립에서는 DOM 객체를 조작하려면 Document 인터페이스를 사용하거나 Jquery 와 같은 DOM 조작 라이브러리르 사용하여야 다소 복잡한 방식으로 DOM을 조작하여야만 했습니다. 그와 반대로 JSX는 HTML 문법과 유사하게 작성하여 아주 편하게 DOM 객체를 컨트롤 할 수 있습니다.

function Movie({title, posterUrl}) {

return (

<div className="wrap-movie">

<div className="box-movie">

<MoviePoster poster={posterUrl}/>

</div>

<div className="box-movie">

<h1>Hello movies!</h1>

<h6>{title}</h6>

</div>

</div>

)

}

이런 식으로 말이죠. 이건 React Functional Component로 작성 된 코드입니다. 저걸 기존 제이쿼리나 Document 인터페이스로 작성 한다면 꽤나 복잡한 코드로 작성 되었을 겁니다. 저렇게 HTML 문법과 유사하게 작성함으로써 코드 작성도 쉽고 가독성 측면에서도 훨씬 더 좋다는 걸 알 수 있습니다. 게다가 기존 HTML file처럼 emmet 플러그인도 사용 가능합니다.

(2) Virtual DOM

기존 MVC Framework는 DOM 객체에서 데이터의 변화가 감지가 되면 DOM 을 업데이트 합니다. 이러한 방식은 브라우저의 리소스를 사용하는 것이기 때문에 성능에 문제가 있을 수 있습니다. React 는 자체 실행 엔진에서 가상돔을 생성하고 단방향 데이터 흐름으로 인한 데이터 변경에 관련 된 DOM객체만 변경 해주는 식의 알고리즘을 가지고 있다. 따라서 브라우저의 리소스를 사용 하지 않고 효율적으로 DOM 객체를 갱신 할 수 있습니다.

(3) 단방향 데이터 흐름

React는 다른 프레임워크와는 다르게 단방향으로 데이터 흐름이 이루어 집니다. Angular같은 경는 Controller와 View 사이에서 양방향으로 데이터 통신이 이루어 지죠. 따라서 프레임워크가 항상 데이터의 변화를 감지 해야 된다는 부담감이 있습니다. 변화가 감지 되면 감지가 된 후 DOM을 업데이트 하기 때문에 성능적으로 문제가 있을 수 있습니다.

하지만 리액트는 데이터가 단방향으로 흐르기 때문에  데이터 변화에 대한 감지를 하지 않습니다. 데이터의 변화가 오게 되면 특정 함수을 실행 시킴으로써 DOM을 갱신 합니다. 따라서 데이터 변화에 따른 성능 저하가 없어지게 됩니다.

[Reference] - https://trustyoo86.github.io/react/2017/11/18/what-is-react.html