[RN공부하기] [3]리액트 훅 useState사용

(1)

//App.js에서

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
        <Text>Body Text details</Text>
        <Text>Body Text details</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

다시 초기 상태에서 import { useState } from "react";만 추가해준다.

리액트 훅에대한 설명은 생략한다.

 

//App.js

const [name, setName] = useState("Gwang");
추가

(2)

name상태값 출력하기.

//App.js

export default function App() {

  const [name, setName] = useState("Gwang");

  return (
    <View style={styles.container}>
        <Text>my name is : {name}</Text>
        <Text>Body Text details</Text>
    </View>
  );
}

:: 결과

(3) name 상태값 변경하기.

- RN에서 Button 컴포넌트 알기.

https://reactnative.dev/docs/button

Button · React Native

//추가
import { StyleSheet, Text, View, Button } from 'react-native';
//기본모양
<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

 

[필수] onPress : 사용자가 버튼을 탭할 때 호출되는 이벤트 핸들러(클릭 했을때 같은)

[필수] title : 버튼 내부에 표시할 텍스트.

color : 텍스트의 색상(ios) 또는 버튼의 배경 색상(Android)

 

(4) 버튼에 onPress 이벤트 핸들러로 이름 상태값 변경하기.

<Button 
	title='update' 
	onPress = { () => setName("Seong")}
></Button>

(5) ClickHandler 함수를 만들어서 이름 나이 출력

export default function App() {

  const [name, setName] = useState("Gwang");
  const [person,setPerson] = useState({name: 'maria', age: 40});

  const ClickHandler = () => {
    setName("Seong");
    setPerson({name:'ilac', age:29});
  }
  return (
    <View style={styles.container}>
        <Text>my name is : {name}</Text>
        <Text>his name : {person.name}</Text>
        <Text>his age : {person.age}</Text>
        <View style={styles.buttonContainer}>
          <Button 
            title='update' 
            onPress = {ClickHandler}
          ></Button>
        </View>
    </View>
  );
}

::결과