[ReactNative] Props 와 State

 

 

Props

React는 다수의 컴포넌트로 이루어져있는 결정체이다.

컴포넌트간 값을 공유하기 위해서 Props객체를 통해 값을 공유한다.

php / jsp 에서  GET/POST 방식과 유사

 

 

Props를 이용하지 않을 때 

class Photo extends Component {
  render(): React$Node {

    return (
      <View>
        <Image
          source={require('./assets/3dol.jpeg')}
          style={{width: 100, height: 300}}
        />
        <Image
          source={require('./assets/miu.jpeg')}
          style={{width: 100, height: 300}}
        />
      </View>
    );
  }
}

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.hello}>Hello World</Text>
      <Photo />
    </View>
  );
};

 

 

Props를 사용했을 때

class Photo extends Component {
  render(): React$Node {
  
  	//let 가변적인 내용을 저장하는 변수 
    let Img = ''; //이미지 링크를 저장해둘 변수 


	//
    if (this.props.type === 'one') {
      Img = require('./assets/3dol.jpeg');
    } else if (this.props.type === 'two') {
      Img = require('./assets/miu.jpeg');
    }

    return (
      <View>
        <Image source={Img} style={{width: 200, height: 300}} />
      </View>
    );
  }
}

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.hello}>Hello World</Text>
      <Photo type="one" />
      <Photo type={'two'} />
    </View>
  );
};

 

<Props document>

reactnative.dev/docs/props

Props · React Native

 

 

State

컴포넌트 내에서 값을 변경하거나 저장할 때 사용

global 변수와 유사 (but 초기설정과 event 발생시 값 변경 방법이 다르므로 그 방법을 숙지해야함)

let등의 변수를 이용해도 되지만 전역적인 상태값을 유지하고 변경하고 싶을 때 State를 사용함 

 

Reset을 눌렀을 때

나의 주소 출력을 눌렀을 때 주소 출력

 

Button을 누르면 State가 변경되도록 만들기

• Reset : State를 Reset
• 나의 주소 출력 : State에 '인천시 계양구'를 저장 

 

클래스 컴포넌트로 생성

class App extends Component {


}

 

 

constructor 이용하여 + State 초기설정

class App extends Component {

  constructor(props) {
    //constructor에서 필수 사항
    super(props);

    //State : 글로별 변수 처럼 이 페이지 내 어디에서든 사용 가능
    this.state = {
      address: '',
    };
  }

}

 

버튼 생성 

class App extends Component {

  constructor(props) {
    //constructor에서 필수 사항
    super(props);

    //State : 글로별 변수 처럼 이 페이지 내 어디에서든 사용 가능
    this.state = {
      address: '',
    };
  }



  render(): React$Node {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello World</Text>
        
        //Props 상위 component인 App에서 component인 Photo에 전달하는 용도 -> ex type
        <Photo type="one" />
        <Photo type="two" />

        //State : global변수 처럼 페이지내 어디서나 사용가능 -> 버튼 입력시 state값 변경되도록
        <Text>{this.state.address}</Text>
        <Button title={'나의 주소 출력'} />
        <Button title={'Reset'} />
      </View>
    );
  }
}

버튼을 생성해 준 후 

State값으로 준 address가 출력될 곳에 <Text>{this.state.address}</Text>작성해줌 

 

 

버튼에 기능을 넣어줌 

class App extends Component {

  constructor(props) {
    //constructor에서 필수 사항
    super(props);

    //State : 글로별 변수 처럼 이 페이지 내 어디에서든 사용 가능
    this.state = {
      address: '',
    };
  }

//버튼 기능 함수
  writeAddress = () => {
    this.setState({
      address: '인천시 계양구',
    });
  };

  writeReset = () => {
    this.setState({
      address: '',
    });
  };

  render(): React$Node {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello World</Text>
        
        //Props 상위 component인 App에서 component인 Photo에 전달하는 용도 -> ex type
        <Photo type="one" />
        <Photo type="two" />

        //State : global변수 처럼 페이지내 어디서나 사용가능 -> 버튼 입력시 state값 변경되도록
        <Text>{this.state.address}</Text>
        <Button title={'나의 주소 출력'} onPress={this.writeAddress} />
        <Button title={'Reset'} onPress={this.writeReset} />
      </View>
    );
  }
}

 

onPress로 버튼에 함수를 연결해주고 함수를 작성함 

setState를 이용해서 State에 값을 대입하고 수정가능 

 

 

State값이 바뀌었을 때 팝업

  writeAddress = () => {
    this.setState(
      {
        address: '인천시 계양구',
      },
      function () {
        alert('alert');
      },
    );
  };

  writeReset = () => {
    this.setState(
      {
        address: '',
      },
      function () {
        alert('alert');
      },
    );
  };

 

다음과 같은 기능을 줄 수 있음