React 란?

프론트 개발을 2년 넘게 하면서 얼마전 부터 자주 들리는 기술이 있다. 

바로 React라는 기술인데, 무엇인지 알아보았다.

 

React란 ?

페이스북에서 개발한 UI용 라이브러리로,
virtual DOM 개념을 이용하여 상태의 변함에 따라 선택적으로 UI를 렌더링한다.
따라서 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해준다.

 

DOM

DOM은 Document Object Model 의 약자로 객체 모델로 구조화된 문서를 표현하는 방법이다.
XML혹은 HTML로 작성된다.
웹 브라우저는 이 DOM을 활용하여 HTML과 CSS를 적용한다. 
DOM은 트리 형태로 되어있어서, 특정 node를 찾을 수도 있고, 수정할 수도 있고, 제거하거나 원하는 곳에 삽입하는 것도 가능하다.

DOM의 치명정인 단점은 동적 UI에 최적화 되어있지 않다는 것이다. 
HTML자체가 정적인 페이지이기 때문인데, 하지만 javascript와 jQuery를 사용해서 손을 볼 수 있다. 

레이아웃을 다시 구성하는 일을 하는 것을 reflow라고 하고, 색상 변경과 같이 레이아웃과는 관계없는 일을 하는 것을 repaint라고 한다. 

규모가 큰 페이지를 만들때 비효율적으로 reflow를 많이 사용하면 성능 저하를 불러올 수 있기 때문에, 적절한 reflow사용이 필요하다.
성능 개선을 위해 reflow횟수를 줄이기 위하여 코드를 최적화 해야한다.
결론은 최소한의 DOM조작으로 성능을 최적화 시켜야 한다.

 

VirtualDOM

VirtualDOM을 사용하면 실제 DOM에 접근해서 조작하는 대신에, 이를 추상화 시킨 자바스크립트 객체를 구성하여 사용한다. 
이는 마치 실제 DOM의 가벼운 사본과도 비슷하다. 


React에서 데이터가 변하여 브라우저상의 실제 DOM을 업데이트 할 때에는 다음과 같은 3가지 절차를 밟는다. 
1. 데이터가 업데이트 되면, 전체 UI를 VirtualDOM에 리렌더링 한다.
2. 이전 내용과 현재의 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.
결국에는 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄진다.

 

오해

VirtualDOM을 사용한다고 무조건 빠른 것은 아니다.
가장 단순한 예를 들어 정적인 페이지를 만든다면 오히려 VirtualDOM을 사용하는 방식이 비효율 적일 수 있다. 
결국엔 적절한 곳에서 React를 사용해야 진가를 발휘하는 것이다.

 

특징

1. VirtualDOM을 사용한다. 
2. JSX: JSX는 JavaScript의 확장 문법이다.  DOM엘리먼트를 만들 때 JavaScript형식으로 작성해야 하는것을, XML과 비슷한 형태로 작성할 수 있게 해준다. 권장사항이고 필수는 아니나, 이것을 사용하지 않으면 좀 불편하다.
3. Component : React는 모두 Component에 대한 것이다. React 개발을 할 때는 모든 것을 Component로서 생각해야 한다. 

장점

1. VirtualDOM을 사용한 어플리케이션의 성능 향상.
2. 클라이언트측에서도 렌더링 될 수 있고, 서버측에서도 렌더링 될 수 있다. (이를 통해 브라우저측의 초기 렌더링 딜레이를 줄일 수 있음)
3. Component의 가독성이 매우 높고 간단해서 유지보수가 쉽다.
프레임워크가 아닌 라이브러리로서 다른 프레임워크들과 사용이 가능하다. React에선 UI만 신경쓰고, 빠져있는 부분은 본인이 좋아하는 라이브러리를 사용하여 stack을 본인 입맛대로 설정할 수 있다.


제한

어플리케이션 View레이어만 다루므로 이 외의 부분은 다른 기술을 사용해야 한다.
React버전 v15부터 IE8 이하 버전을 지원하지 않는다.

 

 

요약

React는 페이스북에서 개발한 UI용 라이브러리로,

 최소한의 DOM 조작으로 성능 최적화를 위해 virtual DOM 개념을 이용하여 상태의 변화에 따라 다르게 UI를 렌더링하며 컴포넌트를 업데이트시키는 기술이다.

 

 

React프로젝트를 시작하려면 Node.js와 NPM을 설정하고 이것저것 설정을 많이 해야한다고 한다.

여기까지 React에 대해서 알아보았다. 

출처: https://velopert.com/775

[React.JS] 강좌 1편 소개 및 맛보기 | VELOPERT.LOG