기본 콘텐츠로 건너뛰기

6월, 2016의 게시물 표시

react.js - tutorial (기본문법)

특징.  - 페이지 갱신시에 필요한 부분만 갱신할 수 있다.  - html을 이루는 element를 재사용할 수 있다.  - jsx라는 문법 사용 angular.js 도 그렇고, 요즘 javascript들 보면 html의 <div> 와 같은 요소들을 OOP마냥 클래스로 찍어내서 만들어내는듯 하다. 덕분에 html페이지는 코드라인수도 줄어들고 간결해질것이고, 이를 보좌하는 *.js 들이 많이 생길것이다. 그와중에 react가 좀 더 매력적인건 DOM을 직접관리하여 렌더링 비용을 줄일 수 있다는 점이 react가 점차 대세가 되는 이유인듯 싶다. 그래서 facebook의 tutorail 을 한번 따라해봤다. https://facebook.github.io/react/docs/tutorial.html react tutorial에 나오는 <div> 하나짜리 간단한 예제다. javascript 변수에 div태그를 사용하는 react class를 할당하고, 하단에 ReactDOM.render를 에서 그 변수를 렌더링한다. 그말인 즉슨, div를 만들었지만 그걸 쓸지 말지 정하는곳은 다른곳이며, 그곳에서 페이지내에 모든 html 요소들을 관리할 수 도 있다라는 말이다. 웬지 관리가 조금 재밌어 질듯하다.  *<script type="text/babel">   ECMAScript6 문법을 사용하기 위함 위와 똑 같은 결과물을 보여주는 코드다. 다만 이번에는 jsx라는 문법을 사용하지 않은 방식이다. '<','>' 같은 문자들이 없어져서 html 스러운 느낌이 많이 줄었지만 라인수가 적어서 그런지, 아직 둘중에 어떤게 더 쓰기 편한지 단정짓기 이른감이 있다. <div> != <div> react.js 영역내에서 사용하는 div는 DOM의 node가 아니라고 한다. 하는 역할은 유사하지만, 이