1. class를 사용한 리액트

class Subject extends Component {
  render() {
    return (
      <header> 
        <h1>WEB</h1>
        World wide web!
      </header>
    )
  }
}

• class Subject extends Component : Component를 상속받는 Subject클래스(리액트상 컴포넌트)를 만든다.
• render() : render 함수는 반드시 선언해야 한다. 원래 자바스크립트 문법대로 라면 function render() 해야 하는데, 최신 자바스크립트는 class안에 소속된 함수에서는 function 이 생략 가능하다.
• 현재 이 문법은 유사 자바스크립트이다. 우리가 만든 코드를 jsx로 코드를 작성하면 create-react-app이 자바스크립트 코드로 converting해주는 것이다.

1. 컴포넌트

function App(){
  return (
    <div>
      <Profile />
    </div>
  )
}

class Profile extends React.Component {
  constructor(){
    super();
  }

  render(){
    return (
      <div>프로필영역입니다</div>
    )
  }
}

1. class를 만들고 이름 짓는다.
2. React.Component에 extends한다고 써준다.
3. constructor(){} 함수를 적어준다.
4. render(){} 함수 안에 원하는 HTML을 적는다.
5. <Profile />을 원하는 곳에 첨부한다.

• constructor() : class 덩어리를 만들 때 속에 새로운 변수를 넣는 것이다.
• super() :extends했던 React.Component 라는 덩어리에 있던 변수들을 그대로 물려받아 쓴다는 것을 의미한다. super()를 써야 state를 만들 수 있다.

1. State

constructor(props) {
    super(props);
    this.state={
      subject:{title:'WEB', sub:'World!wide Web'}
   }
}

• React는 props나 state가 바뀌면 render()함수가 다시 실행되도록 되어있다. 즉, 화면이 다시 설계되는 것이 특징이다.