ReactJS의 Hello world_기본지식으로 설명

이 기사에서는 Facebook 엔지니어가 사용자 인터페이스 구축을 위해 개발한 Javascript 라이브러리인 React.js의 코드 예제와 고급 개념을 제공합니다. 귀하는 ReactJS 전문가이며 이러한 코드를 개선해야 한다고 생각합니다. 제안 사항을 보내주시면 적시에 적절하게 이 기사/코드를 업데이트하겠습니다.

몇 가지 코드 예제를 계속 게시하기 전에 다음 사항을 구체적으로 언급해야 합니다. 최근에는 AngularJS에서 코드를 작성하고 있기 때문에 초보자가 ReactJS를 배우는 것이 조금 어려울 것입니다. UI를 만들려면 작업에 있어서 큰 차이가 있습니다. 이들 간의 주요 차이점을 비교하는 또 다른 블로그 게시물을 작성하겠습니다

그러나 높은 수준에서 ReactJS를 배울 때 약간 "가파른" 학습 경로를 택한 몇 가지 이유는 다음과 같습니다.

• 구성 요소 지향: ReactJS는 구성 요소 지향입니다. 즉, UI 요소를 구성 요소로 처리해야 합니다. 흥미롭게도 구성 요소는 구성 가능합니다. 이는 구성 요소가 하나 이상의 내부 구성 요소를 가질 수 있음을 의미합니다. 아래 코드는 이를 보여줍니다
• JSX 구문: 흥미로운 JSX(XML과 유사한) 구문을 사용하여 코드를 작성합니다. JSX 변환기(프리컴파일러)는 이 구문 구조를 명시적인 JavaScript로 변환하는 데 사용됩니다

이벤트 프록시 모델: 이벤트 위임 모델을 따라 이벤트를 캡처합니다.

코드에 표시된 몇 가지 주요 개념은 다음과 같습니다.

• 구성품
• 이벤트 에이전트
• JSX 구문

다음은 컴포넌트가 구현한 내용을 간략하게 설명합니다

- 사용자가 사용자 이름을 입력할 수 있는 입력 상자 요소입니다. 다음 기사에서 언급할 것처럼 이 입력 상자는 실제로 "UserName" 구성 요소입니다

- "Hello, userName"을 표시하는 데 사용되는 div 레이어 요소입니다. 다음 기사에서 언급하겠지만 이 div 레이어는 실제로 "HelloText" 구성 요소입니다

설계 방법은 다음과 같습니다. 또한 아래 개념을 나타내는 코드를 찾으십시오.

SayHello: 구성 가능한 구성 요소

SayHello는 두 개의 구성 요소를 포함하는 상위 구성 요소입니다. 이 상위 구성 요소는 두 개의 내부 구성 요소로 구성됩니다. 그 중 하나는 사용자에게 이름을 입력하는 기능을 제공하는 UserName이고, 다른 하나는 Hello, world와 같은 텍스트를 표시하는 HelloText입니다. 이 상위 구성 요소는 다음 세 가지 API를 정의합니다.

1. getInitialState
2. handleName제출
3. render(이것은 필수 인터페이스입니다. 구성 요소는 응답으로 구성 요소를 렌더링하는 방법을 React에게 알려주기 위해 render를 정의해야 합니다.)

/
 // This is the parent component comprising of two inner components
 // One of the component is UserName which is used to allow user to enter their name
 // Other component is HelloText which displays the text such as Hello, World
 //
 var SayHello = React.createClass({
 // This is used to set the state, "data" which is 
 // accessed later in HelloText component to display the updated state
 // 
 getInitialState: function() {
  return {data: 'World'}
 },
 // It is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handleNameSubmit: function(name) {
  this.setState({data: name});
 },
 // Render method which is comprised of two components such as UserName and HelloText
 //
 render: function() {
  return(
  <div>
  <UserName onNameSubmit={this.handleNameSubmit}/>
  <HelloText data={this.state.data}/>
  </div>
  );
 }
 });

UserName 구성 요소

UserName 구성 요소에는 다음 두 가지 메서드가 있습니다.

1. handlerChange: onChange 이벤트를 캡처하는 데 사용됩니다.
2. render: 구성 요소를 렌더링하는 데 사용됩니다.

var UserName = React.createClass({
 handleChange: function() {
  var username = this.refs.username.getDOMNode().value.trim();
  this.props.onNameSubmit({username: username });
  this.refs.username.getDOMNode().value = '';
  return false;
 },
 render: function() {
  return(
  <form role="form" onChange={this.handleChange}>
   <div className="input-group input-group-lg">
   <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
   </div>
  </form>
  );
 }
 });

HelloText 구성 요소

HelloText 구성 요소에는 구성 요소를 렌더링하는 방법이 하나만 있습니다

 render：包含了展示HelloText组件内容的代码
 
var HelloText = React.createClass({
  render: function() {
  return (
  <div>
   <h3 id="Hello-this-props-data">Hello, {this.props.data}</h3>
  </div>
  );
  }
 });

전체 코드를 얻으려면 github hello-reactjs 페이지에 코드를 게시해 두었습니다. 자유롭게 의견을 말하거나 제안해 주세요.