D-2 React Component

Component

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render(){
    return <h1>Hello world</h1>
  } 
}

component instance

<MyComponentClass />

render with component, instance

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

// component goes here:
ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
);

this in a Component

class를 선언할 때 this를 많이 사용한다.

class IceCreamGuy extends React.Component {
  get food() {
    return 'ice cream';
  }
 
  render() {
    return <h1>I like {this.food}.</h1>;
  }
}

여기서 this는 IcecreamGuy 클래스의 인스턴스를 참조한다.
자세히 말하면 this를 둘러싼 메서드인 render()이 불러진 객체를 참조한다.
IceCreamGuy는 food와 render 2개의 메서드를 가지고 있다.
this는
보다 자세히 이해하기 위해 다음 자료를 읽어보자.
Gentle Explanation of 'this' in JS

예시

import React from 'react';
import ReactDOM from 'react-dom';

class MyName extends React.Component {
	// name property goes here:
get name() {
  return 'whatever-your-name-is-goes-here';
}

  render() {
    return <h1>My name is {this.name}.</h1>;
  }
}

ReactDOM.render(<MyName />, document.getElementById('app'));

• JSX는 React.createElement()를 호출하는 코드로 컴파일 되기 때문에 React library가 반드시 import되어야 한다.