React - State

state는 내부에 구현에 필요한 데이터를 말한다.

3.State: 컴포넌트가 갖는 상태. 객체의 형태로 컴포넌트 내에서 보관한다.
1.class 컴포넌트로 작성되어야 한다.
값을 변경할땐 반드시 setState메서드를 사용해야함

state 값 변경(setState메서드 사용)
ㄴ render()함수가 재실행

 

사용자에게 알필요도 없고 알아서도 안되는 것을 state라고 함

import React, { Component } from 'react';
import './App.css';

class Content extends Component{	//props를 사용하지 않음
  render(){
    return (
      <article>
          <h2>HTML</h2>
          HTML is HyperText Markup Language.
      </article>
    );
  }
}

class Subject extends Component {	//props 사용
  render(){
    return (
      <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
      </header>  
    );
  }
}

class App extends Component { 
constructor(props) {
super(props){
this.state = {
	subject:{title: 'WEb', sub:'World Wid Web!'}
    }
	}
  }
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>		//동적으로 바꿀수 있다
        <Subject title="HI" sub="React"></Subject>
        <Content></Content>		//정해놓은 값 그대로 나온다
      </div>
    );
  }