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

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

propsとstateって何？　ざっくり説明

props : 親コンポーネントから子コンポーネントへ値を渡すための仕組み
state : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み

props

親コンポーネントから子コンポーネントへ値を渡すための仕組み

コンポーネントの親子関係は？

親 : コンポーネントを利用する側
子 : コンポーネントを利用される側

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

components/Title.js（子コンポーネント）

export default class Title extends React.Component {
  render() {
    return (
      <View>
        <Text>子コンポーネント</Text>
      </View>
    );
  }
}

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の値を渡す

App.js（親コンポーネント）

import Title from './components/Title';

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

components/Title.js（子コンポーネント）

export default class Title extends React.Component {
  render() {
    return (
      <View>
        {/* 親から渡渡された値を取り出す */}
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}

表示

propsで渡せる値

文字列 ・ スタイル ・ イベントなどなど

propsを使う利点

propsを使うことで、1つのコンポーネントを様々なシチュエーションで利用することができる
→ コンポーネントの再利用性が高まる

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>
    );
  }
}

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で管理

stateの使い方

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

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

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,
  }
});

ボタンを押すごとにstateが更新されていることが分かります

まとめ

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

参考

• React.js チュートリアル[超入門] #03 Propsを使ってみる
• [React Native] 基本を学ぶ – Stateでコンポーネントの状態を管理する
• React初心者のためのハンズオン その２[Propsとコンポーネント化]
• 【React Native】propsとstateについて
• React.js チュートリアル[超入門] #05 Stateを使った情報管理
• [React Native] 基本を学ぶ – Stateでコンポーネントの状態を管理する
• ReactNative入門④ ~Stateに触れる~