React Native 함수형 코드를 클래스형 코드로 변경 / State에 대한 설명

아래 코드는 StateBar의 dark light 모드를 설정하거나 StateBar를 숨기고 보이는 .. 버튼이 있는 화면이다.

 

공부삼아 함수형 코드를 클래스형 코드로 변경해보았는데

 

그 둘의 차이점을 보고 어떤 역할을 하는건지 자세히 알 수 있게 되었다.

 

함수형 코드는 기존 프로그래밍 언어들과 다를게 없어 생략.

 

클래스형 코드는 State라는것으로 데이터를 관리하는데 클래스 내부의 전역변수라고 생각하면 편하다.

 

 

보통 클래스를 만들면 클래스 내부 최 상단에 생성자를 만들게 되는데 이 떄 props라는걸 파라미터로 받아 사용하고자 하는 변수를 this.state = {}라는 배열에 넣어 사용한다, (다만 json과 같은 key : value 형태) 

 

배열에 넣어 선언한 변수들은 사용할떄 this.state.변수명 으로 사용한다.

 

해당 변수를 변경하기 위해선 this.setState({key:value});을 사용해야.. render부분에서 쓰는 this.state.key가 변경이 된다.. 

 

* this.state.변수명 = 값 으로 변경해도 값은 변경은 되지만 정상 동작을 하지 않는것으로 확인되고 .. 이유는 모름.. 아는분은 알려주세요.. 

 

아래 코드는 전문 ui도 

 

함수형 코드는 주석처리 되어있다. ui도 기능도 동일한 코드. 

 

 

 

 

import React, { useState, Component } from "react";

import { Button, Text, StyleSheet, StatusBar, View } from "react-native";

 

import Constants from "expo-constants";

//////////////////////////// 클래스형 시작 ///////////////////////////////

class Status_bar extends Component {

  constructor(props) {

    super(props);

    this.state = {

      styleTypes: ["dark-content", "light-content"],

      visibleStatusBar: false,

      styleStatusBar: "dark-content"

    }

  }

 

  changeVisibilityStatusBar() {

    console.log("aaa" + this.state.visibleStatusBar)

    this.setState({

      visibleStatusBar : !this.state.visibleStatusBar

    });

    console.log("bbb" + this.state.visibleStatusBar)

  }

 

  changeStyleStatusBar() {

    // console.log("ccc" + this.state.styleStatusBar)

 

    if (this.state.styleStatusBar === this.state.styleTypes[0]) {

      this.setState({

        styleStatusBar: "light-content"

      });

    } else {

      this.setState({

        styleStatusBar: "dark-content"

      });

      // console.log("ddd" + this.state.styleStatusBar)

 

    }

  }

 

  render() {

    return (

      <View style={styles.container}>

        <View>

          <Text style={styles.textStyle}>StatusBar Style: {this.state.styleStatusBar}</Text>

          <Text style={styles.textStyle}>StatusBar Visibility: {!this.state.visibleStatusBar ? 'Visible' : 'Hidden'}</Text>

        </View>

        <StatusBar backgroundColor="blue" barStyle={this.state.styleStatusBar} />

        <View>

          <StatusBar hidden={this.state.visibleStatusBar} />

        </View>

        <View style={styles.buttonContainer}>

          <Button title="Toggle StatusBar" onPress={() => this.changeVisibilityStatusBar()} />

        </View>

        <View style={styles.buttonContainer}>

          <Button title="Change StatusBar Style" onPress={() => this.changeStyleStatusBar()} />

        </View>

      </View>

    );

  }

}

 

export default Status_bar;

 

//////////////////////////// 클래스형 끝 ///////////////////////////////

 

//////////////////////////// 함수형 시작 ///////////////////////////////

// const App = () => {

//   const styleTypes = ['dark-content', 'light-content'];

//   const [visibleStatusBar, setVisibleStatusBar] = useState(false);

//   const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);

 

//   const changeVisibilityStatusBar = () => {

//     setVisibleStatusBar(!visibleStatusBar);

//   };

 

//   const changeStyleStatusBar = () => {

//     const styleId = styleTypes.indexOf(styleStatusBar) + 1;

 

//     if (styleId === styleTypes.length) {

//       return setStyleStatusBar(styleTypes[0]);

//     }

//     return setStyleStatusBar(styleTypes[styleId]);

//   };

 

//   return (

//     <View style={styles.container}>

//       <View>

//         <Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>

//         <Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible' : 'Hidden'}</Text>

//       </View>

//       <StatusBar backgroundColor="blue" barStyle={styleStatusBar} />

//       <View>

//         <StatusBar hidden={visibleStatusBar} />

//       </View>

//       <View style={styles.buttonContainer}>

//         <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />

//       </View>

//       <View style={styles.buttonContainer}>

//         <Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />

//       </View>

//     </View>

//   );

// };

 

// export default App;

//////////////////////////// 함수형 끝 ///////////////////////////////

//////////////////////////// styles는 공통 사용 ///////////////////////////////

 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    paddingTop: Constants.statusBarHeight,

    backgroundColor: '#ECF0F1',

    padding: 8

  },

  buttonContainer: {

    padding: 10

  },

  textStyle: {

    textAlign: 'center'

  }

});