TIL(2020.12.14)

0. Props

州は学習前にPropsを

に復元した.

親が子供の値下げに

を使う

// 구문
<child value = 'value' />

実際には、Propsはサブアイテムに対して読み取り専用です.

1. state

状態は、コンポーネント内部に

を有する.

propsと異なり、変更が必要な場合は

を使用します.

ステータスsetState()関数を使用して

に変更できます.

1-1. ステータスコードの表示

App.js

import React, { Component } from 'react';
import Counter from './Counter'; // Counter.js 불러오기(state내장하고 있는 콤포넌트)

class App extends Component {
  render() {
    return <counter/ >;
    }
  }

export default App;

Counter.js stateで使用するコンビネーション構成部品

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number : 0 // 기본 state 지정. 변화시킬 값(여기서는 number)에 대해 지정
  };
  
constructor(props) {
  super(props);
  this.handleIncrease = this.handleIncrease.bind(this);
  this.handleDecrease = this.handleDecrease.bind(this);
  }

handleIncrease = () => {
  this.setState({
    number : this.state.number + 1
  });
};
handleDecrease = () => {
  this.setState({
    number : this.state.number - 1
  });
};

  render() {
    return (
    <div>
    <h1>카운터</h1>
    <div> 값 : {this.state.number}</div>
    <button onClick = {this.handleIncrease}> + </button>
    <button onClick = {this.handleDecrease}> - </button>
    </div>
    );
  }
}
export default Counter;