[React]React의 Component에 대하여

React에서 가장 중요한게 무엇이냐 묻는다면 당연히 Component 일 것이다. React의 Component는 Angular의 Directive와 매우 유사하다. 이 Component는 하나의 모듈인데 HTML, CSS, JS 및 해당 관련된 데이터로 구성되어 있다. 보통 React에서는 Component가 jsx(공식 튜토리얼에서는 이걸 쓴다.)로 되어 있는데 나중에 jsx를 javascript로 변환해주기 위한 컴파인 단계가 필요하다.

React가 UI를 구현하는데 있어 매우 편리한 이유는 데이터가 Component 자체에 포함되어 있기 때문이다.(상위 Component에 포함 될 수 도 있다.)

첫 번째 React 구성 요소를 만들어 보자. React 구성 요소를 생성하려면 React 객체에서 createClass 메소드를 사용하고 createClass에 Component에 대한 설명을 전달한다.

var React = require('react')
var ReactDOM = require('react-dom')
var HelloBver = React.createClass({
  render: function(){
    return (
      <div>
        Hello Bver!
      div>
    )
  }
});
ReactDOM.render(<HelloBver />, document.getElementById('app'));

createClass에 전달하는 객체의 유일한 메소드는 render 메소드이다. 모든 Component에는 render 메서드가 있어야 한다. 렌더링의 역할은 Component의 템플릿에 우리가 원하는 데이터를 뿌려주기 위함이다. 조심할 점은 왠만하면 return을 ()로 감싸주자. (습관처럼 해주자.) 위 예제에서 Component가 렌더링되면 화면에 표시 될 텍스트는 Hello Bver!이다.

위의 코드에서React.createClass 생성자를 호출 한 결과를 HelloBver라는 변수에 저장했다. ReactDOM.render는 두 개의 인수를 받는데 랜더링 할 component와 component를 랜더링 할 DOM 노드이다.(React.render가 아닌 ReactDOM.render를 사용하고 있음을 주목하자) 위의 예제에서 HelloBver component를 가져와 ID가 app 인 요소에 렌더링하도록 React에 지시했다. React의 특징은 부모 component에 랜더링하면 모든 하위 자식 component도 랜더링 되기 때문에 ReactDOM.render는 웹 어플리케이션에서 한 번만 사용해야한다. 만약 전체 어플리케이션을 React로 만ㄷ르려면 component를 document.body에 랜더링 하면 된다.

예제를 자세히 살펴보면 이상한 점이 있다. 바로 JavaScript에 “HTML"이 존재한다는 것이다. 이것은 React만의 특징이다. render 메소드에서 작성하는 “HTML"은 실제 HTML이 아니지만 React가 “JSX"를 호출하는 것이다. JSX를 사용하면 가벼운 JavaScript 객체로 변형된 HTML 구문을 작성할 수 있다. 그런 다음 React는 이러한 JavaScript 객체를 가져 와서 실제 DOM의 “가상 DOM"또는 JavaScript 표현을 형성하게 된다. 즉, 자바스크립트의 힘으로 템플릿의 접근성을 얻는 장점을 얻게 된다. 물론 template를 구분하지 못한에 따른 관리 측면에서는 불리함이 존재한다.

아래 예제를 보면 Webpack의 변환 프로세스를 실행하면 JSX가 변환된다.

var HelloWorld = React.createClass({
  displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello World");
  }
});

위처럼 작성하면 이제 JSX -> JS 변환 단계를 거치지 않고 React component를 작성할 수 있지만 더 산으로 간 느낌이다. 참고로 내 주변 React 개발자 중에서 JSX 쓰지 않는 사람을 못 봤다.