Reactのチュートリアルをやったので簡単に電卓を作った

Reactのチュートリアルを読んだので簡単に電卓をつくりました。
作ったやつ
ソースコード

本当にReactのチュートリアルの技術しか使ってないので解説とかはせず、作った後に考えて気づいたこととかを書こうと思います。

setStateについて

class Board extends React.Component {

  ...
  
  updateState(
    result = this.state.result,
    disp = this.state.disp,
    op = this.state.op
  ) {
    this.setState({
      result: result,
      disp: disp,
      op: op,
    });
  }

  ...
}

Boardコンポーネント内にupdateStateというセッターメソッドを作って子コンポーネントに渡していました。でも、setStateの引数がオブジェクトなので、返り値がオブジェクトの関数を読んであげればもっと綺麗に書けるのかなって思いました。

// 適当に書くとこんな感じ
calculate(op) {
  return { op: op }
}

this.setState(calculate(opelator));

updateStateに囚われてボタンパネルのコンポーネントButtonsにメソッドをたくさんつくっていましたが、そこらへんの処理を別ファイルに切り出してあげるとよさそうだと思います。

Stateを子コンポーネントに渡す

Boardのステータスを複数Buttonsに渡すのに、わざわざひとつづつ渡していましたが、propsでstate={this.state}って感じにしてあげればステータスの数が少ない時はいいのかなって感じです。

// こんなのを
    <Buttons 
      display={this.state.disp} 
      result={this.state.result}
    />

// こうする
    <Buttons 
      state={this.state}
    />

まとめ

ReactはHTMLに比べてプログラミングしてる感があって楽しいなって思います。
Reactの学習が一段落ついてTypeScriptをやり始めたらtsでリファクタリングしたいと考えています。