1. React, Component & JSX

많이 유명한 javascript의 라이브러리로 사용자의 인터페이스를 만들기 위해 사용한다. 아마 초보 및 막 시작한 사람들이 페이지를 작성한다면 html내에서 태그를 통해 작성을 할 것이다. react도 html을 쓴다는 것은 같지만, html 태그를 jsx의 형태로 바꾸어 작성한다는 차이점이 있지만, 다음과 같은 특징이 있다.

 

1.  Component

 

Component를 쉽게말하면 화면에 보이는 '뷰 단위'이다. 버튼, 창, 네이게이터 이런 것 하나하나가 모두 컴포넌트라고 불릴 수 있다. 우리가 html에서 div 혹은 section태그로 단위를 묶어서 영역을 나누는 것을 react에서는 이런 것들을 하나의 Component로 작성한다고 할 수 있다. 예를 들어 하나의 버튼을 만든다고 생각하면,  다음과 같이 작성을 할 수 있다.

 

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <button value="click"/>
      </div>
    );
  }
}

 

2. JSX

 

위의 함수를 보면 class가 Component라는 것을 받아 render함수안에서 return을 하는 것을 볼 수 있다. 이때, 위의 HelloMessage를 화면에 구현하려면 다음과 같이 render함수 안에 넣는데, 이는 데이터를 입력받아 화면에 표시할 내용을 반환하는 것과 같다. 그렇지만 단순히 화면에 표시 뿐만아니라, props를 통해 데이터를 전달하고 받아들이는 데에 JSX가 필요한 것이다. 사용을 하지 않고 작성을 할 수 있지만, react에서는 효과적인 사용을 위해 JSX 사용을 권장한다.

 

다음 아래는 React 홈페이지에 있는 JSX 유무의 차이를 보여주는 코드이다. 

 

//JSX를 사용할 때,
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

 

//JSX를 사용하지 않을 때,
class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(
	React.createElement(HelloMessage, { name: "Taylor" }), 
    document.getElementById('hello-example')
);