React의 학습에서 저는 props와state에 대한 이해가 매우 중요하다고 생각합니다.
그래서 이번에 우리는 이 두 캐릭터와 사용 방법을 조사하고 자신의 스타일을 정리해 보았습니다!!

props와state는 무엇입니까?두루뭉술하게 설명하다

props: 부모 구성 요소에서 하위 구성 요소로 값을 전달하는 메커니즘
state: 모든 구성 요소의 구성 요소 상태를 관리하는 메커니즘

props

상위 어셈블리에서 하위 어셈블리로 값을 전달하는 메커니즘

구성 요소의 부자 관계는?

상위: 어셈블리 사용자
서브어셈블리: 어셈블리의 한 면을 사용합니다.
구성 요소는 포위를 통해 호출할 수 있습니다

components/Title.서브어셈블리

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

App.상위 어셈블리

import Title from './components/Title';

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

부모 구성 요소가 하위 구성 요소를 호출할 때props를 사용하여 하위 구성 요소에 값을 전달할 수 있습니다

props 사용 방법

하위 구성 요소: 부모로부터 값을 얻고 싶은 곳에props를 정의합니다

상위 구성 요소: 하위 구성 요소를 호출할 때 하위 구성 요소에 전달할 값을 설정합니다

예시:props에서 하위 구성 요소의 제목을 정의하고 제목 값을 부모 구성 요소에서 하위 구성 요소로 전달합니다

App.상위 어셈블리

import Title from './components/Title';

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

components/Title.서브어셈블리

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

표시

props 전달 가능 값

문자열, 스타일, 이벤트 등

props 사용의 장점

props를 사용하면 여러 가지 상황에서 하나의 구성 요소를 사용할 수 있습니다
→ 어셈블리의 재사용성 향상

App.상위 어셈블리

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.서브어셈블리

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의 초기 값 설정
↓
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,
  }
});