propsとstateのイメージをつかむ【はじめてのReact】

Reactの学習していて、propsとstateについての理解が重要だと思いました。
そこで今回は、この2つの役割や使い方について調べ、自分なりにまとめてみました！！

# propsとstateって何？　ざっくり説明
**props** : 親コンポーネントから子コンポーネントへ値を渡すための仕組み
**state** : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み
<img width="944" alt="スクリーンショット 2019-11-14 23.15.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/e0cc33b8-5300-1ab1-e190-083241966fba.png">

# props
親コンポーネントから子コンポーネントへ値を渡すための仕組み
## コンポーネントの親子関係は？
親 : コンポーネントを利用する側
子 : コンポーネントを利用される側

コンポーネントは`</>`で囲むことで呼び出すことができる

<img width="670" alt="スクリーンショット 2019-11-16 20.52.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/0384b8a1-2eb2-bd87-7882-005869ad8edf.png">

```react:components/Title.js（子コンポーネント）
export default class Title extends React.Component {
  render() {
    return (
      <View>
        <Text>子コンポーネント</Text>
      </View>
    );
  }
}
```

```react:App.js（親コンポーネント）
import Title from './components/Title';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text>親コンポーネント</Text>
        {/* Titleコンポーネント（子コンポーネント）の呼び出し */}
        <Title/>
      </View>
    );
  }
}
```

親コンポーネントが子コンポーネントを呼び出すとき、propsを利用することで子コンポーネントに値を渡すことができる

##  propsの使い方
- 子コンポーネント : 親から値をもらいたいところにpropsを定義する
- 親コンポーネント : 子コンポーネント呼び出し時に、子に渡したい値を設定する

例：子コンポーネントのタイトルをpropsで定義し、親コンポーネントから子コンポーネントへtitleの値を渡す

<img width="1008" alt="スクリーンショット 2019-11-16 21.42.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/1139d7ec-cc45-b819-9e5e-b723a0815fb3.png">

```react:App.js（親コンポーネント）
import Title from './components/Title';

export default class App extends React.Component {
  render() {
    return (
      <View>
        {/* 子に渡す値を設定 */}
        <Title title="今日のできごと"/>
      </View>
    );
  }
}
```

```react:components/Title.js（子コンポーネント）
export default class Title extends React.Component {
  render() {
    return (
      <View>
        {/* 親から渡渡された値を取り出す */}
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}
```

表示
<img width="305" alt="スクリーンショット 2019-11-16 21.40.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/eb728251-330d-5aa3-648d-3ee9f2e590ce.png">

## propsで渡せる値
**文字列** ・ **スタイル** ・ **イベント**などなど

## propsを使う利点
propsを使うことで、1つのコンポーネントを様々なシチュエーションで利用することができる
→ **コンポーネントの再利用性が高まる**
<img width="1023" alt="スクリーンショット 2019-11-17 14.46.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/df8a7e29-94c0-2251-9f10-e8b0277acdbc.png">

```react:App.js（親コンポーネント）
import Title from './components/Title';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Title titleStyle={{backgroundColor: "pink"}} title="リンゴ🍎"/>
        <Title titleStyle={{backgroundColor: "yellow"}} title="バナナ🍌"/>
        <Title titleStyle={{backgroundColor: "orange"}} title="オレンジ🍊"/>
      </View>
    );
  }
}
```

```react:components/Title.js（子コンポーネント）
export default class Title extends React.Component {
  render() {
    return (
      <View>
        <Text style={this.props.titleStyle}>{this.props.title}</Text>
      </View>
    );
  }
}
```

## propsの注意点
- 子から親へ値を渡すことはできない
- propsの値を動的に変更することはできない

# state
各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み

コンポーネント上でやりとりされる情報をstate（状態）として管理していきます
そして、その状態の変化によってstateの値を変えることができます

例：カウントアップをstateで管理
<img width="1023" alt="スクリーンショット 2019-11-17 15.30.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/16ef7a73-238e-f511-23bb-1c052b75fae6.png">

## stateの使い方
stateの初期値を設定する
↓
this.setState()にstateを変化させる処理を書く
★stateの値を更新する場合は必ず`setState()`経由で行う
↓
stateを更新すると、**必要なコンポーネントが自動で再読み込み**される

## stateを使ってカウントアップボタンを作る

```react:App.js
import React, { Component } from 'react';
import {
  View,
  Text,
  // ボタンコンポーネント
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

export default class App extends React.Component {
  // stateの初期値設定
  state = { count: 0 }

  // stateの状態変更処理 必ずsetState()で行う！
  countUp = () => {
    this.setState({
      count: this.state.count + 1 
    });
  } 

  render() {
    return (
      <View style={styles.container}>
        {/* カウントアップボタン */}
        <TouchableOpacity 
          style={styles.button}
          onPress={this.countUp}>
          <Text>ボタン</Text>
        </TouchableOpacity>

        {/* stateのcountを表示 */}
        <Text>
          Count : {this.state.count}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'pink',
    color: 'white',
    marginBottom: 10,
    padding: 10,
    borderRadius: 15,
  }
});

```
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/76ea2fcb-1bd5-758f-0f7d-5846c872968c.gif)
ボタンを押すごとにstateが更新されていることが分かります

# まとめ
propsとstateについて理解を深めました。
**props** : 親コンポーネントから子コンポーネントへ値を渡すための仕組み
**state** : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み
誰かの理解の助けになれば幸いです！

# 参考
- [React.js チュートリアル[超入門] #03 Propsを使ってみる](https://note.mu/natsukingdom/n/nb10d5aef09ba)
- [[React Native] 基本を学ぶ – Stateでコンポーネントの状態を管理する](https://dev.classmethod.jp/smartphone/react-native-props/)
- [React初心者のためのハンズオン その２[Propsとコンポーネント化]](https://freelance-jak.com/technology/react/2133/)
- [【React Native】propsとstateについて](https://fresopiya.com/2019/04/01/prop-state/)
- [React.js チュートリアル[超入門] #05 Stateを使った情報管理](https://note.mu/natsukingdom/n/ne81d079623b3)
- [[React Native] 基本を学ぶ – Stateでコンポーネントの状態を管理する](https://dev.classmethod.jp/smartphone/react-native-state/)
- [ReactNative入門④ ~Stateに触れる~](https://qiita.com/senou/items/e0fe6e9a0be08a6621d7)