1. 개요

React는 유저 인터페이스 구현을 위한 Javascript 라이브러리중 하나입니다.

React는 여러 종류의 컴포넌트들을 가지고 있지만, 우리는 React.Component의 서브 클래스를 사용하여 시작 할 것입니다.

  class HomeCmp extends React.Component {
    render() {
      return (
        <div className="homeWrp">
          <h1>Web page list for {this.props.name}</h1>
          <ul>
            <li>Instagram</li>
            <li>Naver</li>
            <li>Google</li>
          </ul>
        </div>
      );
    }
  }

XML과 비슷한 태그들을 사용하게 되는데, 작성한 컴포넌트는 React에게 무엇을 렌더링 하고싶은지 알려줍니다. 그 후 React는 데이터가 변경될때, 올바른 컴포넌트들을 업테이트 하고, 렌더링합니다.

여기에서 HomeCmp는 React 컴포넌트 클래스 혹은 React 컴포넌트 타입입니다. 하나의 컴포넌트는 props라 불리는 파라미터를 사용하며, render 메서드를 통해 표시할 뷰 계층 구조를 반환합니다.

render 메서든느 렌더링하길 원하는 내용을 반환하면 REact는 그 내용을 가져와 스크린에 렌더링 합니다. 특히 render는 React 엘리먼트를 반환하는데 이는 렌더링 할 부분에 대한 간단한 내용입니다.

대부분의 Rect 개발자들은 이 구조를 더 쉽게 작성할 수 있게 해주는 JSX라는 문법을 사용합니다. <div/> 라 쓰면 빌드시 React.createElement(‘div’)로 변환 되는데, 위의 코드는 아래의 코드와 동일합니다.

  return React.createElement("div", { className: "homeWrp" }, 
    React.createElement("h1", null, "Web page list for", props.name), 
      React.createElement("ul", null, 
        React.createElement("li", null, "Instagram"), 
        React.createElement("li", null, "Naver"), 
        React.createElement("li", null, "Google")
      )
    );

createdElement()에 대해 더 많은 내용이 궁금하면 API reference 에 자세한 설명이 있습니다.

튜토리얼에서는, createdElement()를 직접적으로 사용하지 않고 JSX를 사용하겠습니다.

JSX에서는 중괄호 안에 Javascript 문법을 사용할수 있습니다. 각 React 엘리먼트는 변수에 저장하거나 프로그램 여기저기에 전달할 수 있는 실제 Javascript 객체입니다.

HomeCmp 컴포넌트는 내장된 DOM 컴포넌트만 랜더링하지만 <HomeCmp /> 코드를 작성하여 커스텀 React 컴포넌트를 쉽게 구성할 수 있습니다. 각 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있기 때문에 간단한 컴포넌트들로 복잡한 UI를 구현할 수 있습니다.