[React] 리액트(React.js) 가볍게 알아보기

리액트(React.js)란?

리액트는 사용자 인터페이스를 만드는데 사용되는 자바스크립트 라이브러리라고 볼 수 있습니다.

Facebook 개발팀이 개발하였고, 재사용이 가능한 UI구성 요소를 만들어, 데이터에 변화가 생기면

다시 처음부터 로드하지 않고, 변경된 부분만 다시 로드하여 성능을 최대화한 효율적인 자바스크립트

라이브러리이다.

 

좀 더 상세히 말하자면...

DOM(Document Object Mode)은 객체로 문서 구조를 HTML이나 XML로 작성하여 표현하는데,

이러한 DOM에 변화가 일어나면 일반적으로 웹에서는 CSS를 다시 연산하고, 레이아웃을 다시 구성하여

페이지를 리페인트하기 때문에 시간이 오래걸린다.

 

하지만 리액트는 Virtual DOM(가상의 DOM) 을 이용하여 변경된 부분을 Real DOM(실제 DOM)과 

비교하여 DOM의 조작을 최소한으로 하여 시간 또한 효율적으로 처리하는 방식이다.

 

리액트의 특징

- 컴포넌트(Component) 기반

리액트는 재사용이 가능하게 각각의 독립된 모듈을 가진 컴포넌트 기반으로 중복해서 코드를 입력할

필요 없으며 컴포넌트만 import해서 사용하면 되어 재사용성이 높다. 때문에 생산성을 향상 시키고,

유지보수가 용이할 뿐만 아니라 컴포넌트 단위로 나눠져 있기 때문에 전체 코드를 파악하기도

상대적으로 쉽다는 특징을 가지고 있다.

 

- JSX(JavaScript Systax Extension)

JSX는 자바스크립트의 확장 문법으로 자바스크립트와 HTLM을 합쳐놓은 것처럼 생겼다.

작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨(Babel)을 사용하여

자바스크립트 형태의 코드로 변환된다.

//아래와 같이 작성하게 되면...
<div>Hello <b>world!</b></div>    

//바벨(Babel)을 통해 아래와 같이 해섣된다.
React.creactElement("div",null,"Hollow",React.creactElement("b",null,"world!"))

 

리액트는 자바스크립트와 HTML 문법에 익숙하다면 쉽고 빠르게 적응할 수 있을것 같다.