데이터

데이터의 종류엔 2가지가 있습니다.
부모에게서 넘겨받는 props와 내 컴포넌트 안에서 바뀌는 데이터인 state가 있습니다.

props

부모가 jsx의 attribute로 값을 넘겨주면 받아서 사용할 수 있습니다. props의 값은 바꾸지 않습니다.

// 부모 컴포넌트
class Parent extends Component {
  render() {
    return (
      <Child drinks={['water', 'juice', 'wine']} />
    )
  }
}

// 자식 컴포넌트
class Child extends Component {
  render() {
    return (
      <div>
        this.props.drinks.map(drink => <h1 key={drink}>{drink}</h1>)
      </div>
    )
  }
}

state

state 객체를 만들어서 setState로 값을 바꿀 수 있습니다.

class App extends Component {
  constructor() {
    super();
    
    this.state = {
    	drinks = ['water', 'juice', 'wine'],
    }
  }
  render() {
    return (
      <div>
        this.state.drinks.map(drink => <h1 key={drink}>{drink}</h1>)
      </div>
      <button 
        onClick={() => {
          this.setState({drinks: ['wiskey', 'Soda', 'coke']})
        }}
      >
        change drinks
      </button>
    )
  }
}