[React] 리액트(React.js)란? 왜 사용할까?

리액트(React) 란?

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수 된다.

- 위키백과

 

왜 리액트를 사용할까?

 JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 따라서 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면 관리하기 힘들고, 웹 애플리케이션의 규모가 커질수록 성능 저하의 원인이 될 수 있다.

 하지만, 리액트는 Virtual DOM을 사용해서 빠른 성능을 유지하도록 한다. Virtual DOM은 메모리에 가상으로 존재하는 DOM으로 JavaScript의 객체이다. 따라서 작동 성능이 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다. 이는 브라우저에 보여지고 있는 DOM과 상태가 업데이트 되어 업데이트가 필요한 곳의 UI를 비교하여 실제 DOM에 패치시켜준다.

 

리액트의 특징

- 컴포넌트 기반

 컴포넌트(Component)란 재사용이 가능한 각각의 독립된 모듈을 말한다. UI를 개발하는 데 있어 컴포넌트는 레고 블록이라고 생각하면 쉽다. 컴포넌트들(레고 블록들)을 조립해서 하나의 완성품을 만드는 것이다. 재사용을 할 수 있으므로 생산성을 향상시키고, 유지보수를 쉽게 할 수 있도록 도와준다.

- JSX

const element = <h1>Hello, world!</h1>;

 JSX는 JavaScript를 확장한 문법이다. 이는 자바스크립트와 HTML을 동시에 사용할 수 있다. 그러므로 쉽게 배우고, 적응 할 수 있다.

 

 

Reference: 밸로퍼트와 함께하는 모던 리액트