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가 아니라고 한다.
하는 역할은 유사하지만, 이것은 단지 react component일 뿐이다.
따라서, 기본적으로 react.js는 XSS 문제에서 안전하다.


component 구성
이번엔 위에서 만든 CommentBox내에 div를 몇개 추가해보자.


CommentList, CommentForm이라는 component를 생성하고
CommnetBox내에 CommentList,Form에 매핑될 div를 추가하였다.
ReactDom.render는 건들 필요 없다.


data전달을 위한 속성추가
component를 생성했으면, 이번엔 속성도 추가해보자.
이런 속성들은 data를 주고 받을때 종종 사용된다.

Commnet라는 component를 생성했고, CommentList 내부에 추가했다.
이 둘은 commnet내에 {this.props} 라는 문법을 통해 data를 주고 받을 수 있다.
이해를 돕기위해 렌더링된 html은 다음과 같다.
CommentList의 속성authro의 값을 Comment에서 받아서 <h2>로 처리된걸 확인할 수 있다. 마찬가지로 CommnetList에 children을 추가했다면 </h2>이후에 표시될것이다.
단 위의 경우는 </h2> 다음에 문장이 먼저 입력이 되어있기때문에 children은 표시되지 않는다. 하지만 'This is one comment' 라는 문장을 지우고 children을 추가하면 그때는 children이 표시된다.

<div class="commentList" is="null">
 <!-- react-text: 5 -->Hello, world! I am a CommentList.<!-- /react-text -->
  <div class="comment" is="null">
    <h2 class="commentAuthor" is="null">Pete Hunt</h2>
     <!-- react-text: 8 -->This is one comment<!-- /react-text -->   
  </div>
  <div class="comment" is="null">
    <h2 class="commentAuthor" is="null">Jordan Walke</h2>
    <!-- react-text: 11 -->This is *another* comment<!-- /react-text --></div>
 </div>
</div>

JSON (props)

json형태의 데이터를 전달하는 방법이다.
json형태의 변수 data를 생성하고 <CommentBox>하위에 <CommentList> 에 할당했다.
ReactDOM.render()에서 <CommentBox>다시 렌더링하기로 한다.



Reactive state

이전에 사용한 props는 immutable한 것이라고 한다. 부모가 자식에게 데이터를 전달할때는
props를 사용하고, component 내부에서 데이터를 수시로 변경할때는 state를 사용한다.