[React] React 살펴보기

Angular JS

<a ng-if="user.session" href="/logout">Logout</a>
<a ng-if="!user.session" href="/login">Login</a>

 

ng-if 값에 따라서 다른 링크를 연결한다. 

Angular로 작성된 코드를 React로 바꿔보면

 

React 

if(user.session) return React.createElement('a', {href: '/logout'}, 'Logout')
else return React.createElement('a', {href: '/login'}, 'Login')

React의 특징은 선언형 프로그래밍이다. 선언형 프로그래밍은 결괏값에 더 집중한 것이 명령형 프로그래밍과 대조적이다. 지역변수를 더 적게 사용하고 논리도 단순하게 표현할 수 있다. 

 

기존에 jQuery를 사용할 때는 DOM을 조작하여 필요한 부분을 변경했다면,  React는 내부적으로 가상 DOM을 사용하여 이미 반영된 뷰와 새로 변경된 뷰의 차이점을 찾아낸다. (=DOM 비교 or 상태와 뷰의 보정)