[ React Native ] 리액트 네이티브 기본강좌 5강 - state

www.youtube.com/watch?app=desktop&v=_Y3bTACoi2U

이 강의 참고 그러나.. 이분은 계속 class형을 사용하기 때문에 공식 문서에서 이 부분을 찾아서 function 형으로 고쳐서 작성하고 있다.

시간이 배로 걸리지만... 공식 문서가 친절해서 다행이다.

공식문서를 나중에 따로 정리할까 했지만 나중에는 또 안할거같아서 그냥 이해한대로 정리를 해야겠다. 

State란?

컴포넌트 내에서 값을 변경하거나 지정할 때 State를 사용한다.
 - 글로벌 변수라고 생각하자!!
 - State의 초기설정과 값 변경을 익혀야 한다.

<공식 문서> 

state 는 컴포넌트의 개인 데이터 저장소와 같다!

대체로 랜더링할때 컴포넌트를 확인하기 위해 props를 사용하고,

시간이 지났을 때 변할 법한 컴포넌트 데이터를 까먹지 않으려고 (keep track of) state에 저장한다.

공식문서에서는 버튼을 눌러서 고양이 두마리에게 밥을 주면 hungry -> full 로 상태가 바뀌게 하는 예제를 다룬다.

이 예시에서 이름은변하지 않지만 배고픔은 변한다. 이 때 배고픈 상태를 state에 저장하고, 버튼을 누르면 state를 업데이트 하게된다.

버튼 눌러서 상태 바꾸기

import React, {Fragment, Component, useState} from 'react'; //useState추가
import {
  SafeAreaView,

  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  Button,
  StatusBar,
} from 'react-native'; //Button추가

추가적인 import 가 필요하다.

 

const App = () => {

  const [isPressed, setIsPressed] =useState(true); //isPressed라는 state variable을 생성


  return (
    <View style={styles.container}>
      <Text style={styles.hello}>Hello,world!</Text>
      <Photo type= 'sleep' />
      <Photo type= 'front' />

      <Button title={'나의 이름 출력'}
              onPress={() => {setIsPressed(false);}}
      />
      <Button title={'리셋'}
              onPress={() => {setIsPressed(true);}}
      />
      <Text> {isPressed ? '' : '안녕? 난 삼돌' }</Text>

    </View>
  );
};

useStates는 두가지 일을 한다.

첫번째, 초기값과 함께 "state variable"을 만든다. 

=> 위의 예시에서는 isPressed라는 state variable을 만들어 true라는 초기값으로 설정한 것.

두번재, state variable을 설정하기 위한 함수를 만든다

=> 위의 예시에서는 setIsPressed

이름을 어떻게 짓는지는 상관이 없고 이런 패턴은 아래처럼 받아들이는 것이 편하다 :P

[<getter> ,<settter>]= useState(<initialValue>) 

 

또한, const 로 선언되었지만 isPressed는 reassign될 수 있다.  

setIsPressed를 호출하면 그 컴포넌트가 다시 render될 것이다. 그러면 useState가 isPressed에게 다음 값을 주게된다.

[참고]

useState를 사용해서 아무 종류의 데이터를 다 track할 수 있다. //string, Booleans, arrays, objects

아래처럼 만들면 초기 값이 0 인 timesPetted state 변수가 생김!

const [timesPetted, setTimesPetted] = useState(0)

실행화면

초기화면 -> 나의 이름 출력 클릭 -> 리셋 클릭

전체코드

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Fragment, Component, useState} from 'react';
import {
  SafeAreaView,

  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  Button,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Photo = (props) => {

  let dolImg ='';
  if (props.type ==='sleep') {
    dolImg=require('./assets/sleep.jpeg');
  } else if (props.type === 'front') {
    dolImg=require('./assets/front.jpg');
  }

  return(

    <View>
      <Image
        source={dolImg}
        style={{width: 200, height: 200}}
      />
    </View>
  )
}

const App = () => {

  const [isPressed, setIsPressed] =useState(true);


  return (
    <View style={styles.container}>
      <Text style={styles.hello}>Hello,world!</Text>
      <Photo type= 'sleep' />
      <Photo type= 'front' />

      <Button title={'나의 이름 출력'}
              onPress={() => {setIsPressed(false);}}
      />
      <Button title={'리셋'}
              onPress={() => {setIsPressed(true);}}
      />
      <Text> {isPressed ? '' : '안녕? 난 삼돌' }</Text>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', //위아래 중간 맞추기
    alignItems: 'center', //좌우로 중간 맞추기
  },
  hello: {
    color: 'red',
  },
});

export default App;