React 란?

리액트는 2013년 Facebook 에서 오픈소스로 내놓은 자바스크립트의 라이브러리이다.
기존의 다른 프레임워크들과 다르게 뷰에만 집중한다. 다시 한 번 설명 하면 Angular나 Vue.js 같은 경우는 MVC, MVVM의 패턴을 사용 하지만 React 같은 경우는 다르다. 단순히 뷰만 조작한다. DOM 객체의 이벤트에 대한 반응, 업데이트에만 관심이 있다.
React는 왜 라이브러리일까?

React 특징

React의 특징을 알아보면 어떻게 해서 뷰에만 관심이 있다는 건지 DOM 객체 성능이 왜 좋다는 건지 알 수 있다.

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

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 플러그인도 사용 가능하다.

Virtual DOM

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

단방향 데이터 흐름

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

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

 

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

게으른 개발자 | 게으른 개발자