리액트 네이티브 계산기 앱 만들기

계산기 만들기 

바디 짤 때 가로로도 줄맞춤 일부 가로줄에서는 세로로도 줄맞춤 해야되니까 View를 두번 감싸야되더라 

 

<View style={styles.body}>

          <View style={styles.inBody}>

            <TouchableOpacity

              onPress={() => this.clickNum('1')}

              style={styles.numTouch}>

              <Text style={styles.num}>1</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('2')}

              style={styles.numTouch}>

              <Text style={styles.num}>2</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('3')}

              style={styles.numTouch}>

              <Text style={styles.num}>3</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('+')}

              style={styles.numTouch}>

              <Text style={styles.num}>+</Text>

            </TouchableOpacity>

          </View>

        </View>

const styles = StyleSheet.create({

  body: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'stretch',

  },

  inBody: {

    flexDirection: 'row',

  },

  num: {

    textAlign: 'center',

    textAlignVertical: 'center',

    fontSize: 30,

  },

  numTouch: {

    flex: 1,

  },

 

가로 바디 + 세로 인바디(플렉스디렉션: 로우) + 각 항목 선택 위해 터쳐블오퍼시티 + 글자 내보여주기 위해 텍스트 

숫자를 그냥 1,2,3,4,5로 했더니 concat이 안먹어서 ‘1’,’2’,’3’,’4’,’5’로 바꿈 

 

계산할때는 Number(‘1’)로 감싸줌 

num1 = Number(num1) + Number(num2);

 

그래도 숫자끼리는 concat이 되는데 .은 안돼서 .은 그냥 num1 + ‘.’ , num2 + ‘.’ 으로 바꿈 

 

근데 .이 있으면 또 .이 붙으면 안되니까 소수점여부확인하기 

https://aspdotnet.tistory.com/2201

 

        if (num1.indexOf(e) === -1) {

          num1 = num1 + e;

        }

 

Del은 slice로 하려고 했는데 오류가 뜬다,,

 

if (e === 'Del') {

      // Del

      if (cal === '') {

        if (num1.valueOf === 1) {

          num1 = '0';

          this.setState({

            res: num1,

          });

        } else {

          num1 = num1.slice(0, num1.valueOf);

          this.setState({

            res: num1,

          });

        }

      } else {

        if (num1.valueOf === 1) {

          num2 = '0';

          this.setState({

            res: num2,

          });

        } else {

          num2 = num2.slice(0, num2.valueOf);

          this.setState({

            res: num2,

          });

        }

      }

    }

 

오류… 

valueOf를 length로 바꾸고 

slice 할때 length - 1로 했더니 됐다!!!

 

 if (cal === '') {

        if (num1.length === 1) {

          num1 = '0';

          this.setState({

            res: num1,

          });

        } else {

          num1 = num1.slice(0, num1.length - 1);

          this.setState({

            res: num1,

          });

        }

근데 = 누르고서 답 들어왔을 때 다시 숫자 누르면 오류

왜? 아마… 더하고 나면 이게 문자가 아니라 숫자가 되서 그런것 같다. 

 

수정! 숫자끼리 더한뒤에 + “” 해주면 문자열이 된다!

num1 = Number(num1) + Number(num2) + "";

 

단, 다른 기호들 말고 ‘=’에만 이렇게 처리해주는게 필요. 

왜냐면 다른 기호들을 누르면 앞의 기호 있으면 처리해주고 없으면 이어주는데 

두 경우 모두 이미 num1, num2가 문자열이기 때문. (‘0’이라거나…)

 

성공?!

 

/* eslint-disable quotes */

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 *

 * @format

 * @flow strict-local

 */

 

import React, {Component} from 'react';

import {

  StyleSheet,

  View,

  Text,

  TextInput,

  TouchableOpacity,

  Image,

} from 'react-native';

 

var num1 = '0';

var num2 = '0';

var cal = '';

 

class App extends Component {

  state = {

    res: '0',

  };

 

  clickNum = (e) => {

    if (e === 'Re') {

      this.setState({

        res: '0',

      });

      num1 = '0';

      num2 = '0';

      cal = '';

    } else if (e === '+/-') {

      if (cal === '') {

        num1 = num1 - num1 * 2;

        this.setState({

          res: num1,

        });

      } else {

        num2 = num2 - num2 * 2;

        this.setState({

          res: num2,

        });

      }

    } else if (e === '/2') {

      if (cal === '') {

        num1 = num1 / 2 + "";

        this.setState({

          res: num1,

        });

      } else {

        num2 = num2 / 2 + "";

        this.setState({

          res: num2,

        });

      }

    } else if (e === '/') {

      if (cal === '') {

        cal = e;

      } else {

        if (cal === '+') {

          num1 = Number(num1) + Number(num2);

        } else if (cal === '-') {

          num1 = Number(num1) - Number(num2);

        } else if (cal === '*') {

          num1 = Number(num1) * Number(num2);

        } else if (cal === '/') {

          num1 = Number(num1) / Number(num2);

        }

        cal = e;

        num2 = '0';

        this.setState({

          res: num1,

        });

      }

    } else if (e === '+') {

      if (cal === '') {

        cal = e;

      } else {

        if (cal === '+') {

          num1 = Number(num1) + Number(num2);

        } else if (cal === '-') {

          num1 = Number(num1) - Number(num2);

        } else if (cal === '*') {

          num1 = Number(num1) * Number(num2);

        } else if (cal === '/') {

          num1 = Number(num1) / Number(num2);

        }

        cal = e;

        num2 = '0';

        this.setState({

          res: num1,

        });

      }

    } else if (e === '-') {

      if (cal === '') {

        cal = e;

      } else {

        if (cal === '+') {

          num1 = Number(num1) + Number(num2);

        } else if (cal === '-') {

          num1 = Number(num1) - Number(num2);

        } else if (cal === '*') {

          num1 = Number(num1) * Number(num2);

        } else if (cal === '/') {

          num1 = Number(num1) / Number(num2);

        }

        cal = e;

        num2 = '0';

        this.setState({

          res: num1,

        });

      }

    } else if (e === '*') {

      if (cal === '') {

        cal = e;

      } else {

        if (cal === '+') {

          num1 = Number(num1) + Number(num2);

        } else if (cal === '-') {

          num1 = Number(num1) - Number(num2);

        } else if (cal === '*') {

          num1 = Number(num1) * Number(num2);

        } else if (cal === '/') {

          num1 = Number(num1) / Number(num2);

        }

        cal = e;

        num2 = '0';

        this.setState({

          res: num1,

        });

      }

    } else if (e === '=') {

      if (cal === '') {

      } else {

        if (cal === '+') { 

          num1 = Number(num1) + Number(num2) + "";

        } else if (cal === '-') {

          num1 = Number(num1) - Number(num2) + "";

        } else if (cal === '*') {

          num1 = Number(num1) * Number(num2) + "";

        } else if (cal === '/') {

          num1 = Number(num1) / Number(num2) + "";

        }

        cal = '';

        num2 = '0';

        this.setState({

          res: num1,

        });

      }

    } else if (e === '.') {

      if (cal === '') {

        if (num1.indexOf(e) === -1) {

          num1 = num1 + e;

          this.setState({

            res: num1,

          });

        }

      } else {

        if (num2.indexOf(e) === -1) {

          num2 = num2 + e;

          this.setState({

            res: num1,

          });

        }

      }

    } else if (e === 'Del') {

      // Del

      if (cal === '') {

        if (num1.length === 1) {

          num1 = '0';

          this.setState({

            res: num1,

          });

        } else {

          num1 = num1.slice(0, num1.length - 1);

          this.setState({

            res: num1,

          });

        }

      } else {

        if (num1.length === 1) {

          num2 = '0';

          this.setState({

            res: num2,

          });

        } else {

          num2 = num2.slice(0, num2.length - 1);

          this.setState({

            res: num2,

          });

        }

      }

    } else {

      // 숫자인 경우

      if (cal === '') {

        if (num1 === '0') {

          num1 = e;

          this.setState({

            res: num1,

          }); 

        } else {

          num1 = num1.concat(e);

          this.setState({

            res: num1,

          });

        }

      } else {

        if (num2 === '0') {

          num2 = e;

          this.setState({

            res: num2,

          });

        } else {

          num2 = num2.concat(e);

          this.setState({

            res: num2,

          });

        }

      }

    }

  };

 

  render() {

    return (

      <View style={styles.allBody}>

        <Text style={styles.top}>{this.state.res}</Text>

        <View style={styles.body}>

          <View style={styles.inBody}>

            <TouchableOpacity

              onPress={() => this.clickNum('Re')}

              style={styles.numTouch}>

              <Text style={styles.numSmall}>Re</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('+/-')}

              style={styles.numTouch}>

              <Text style={styles.numSmall}>+/-</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('/2')}

              style={styles.numTouch}>

              <Text style={styles.numSmall}>/2</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('/')}

              style={styles.numTouch}>

              <Text style={styles.num}>/</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={styles.body}>

          <View style={styles.inBody}>

            <TouchableOpacity

              onPress={() => this.clickNum('1')}

              style={styles.numTouch}>

              <Text style={styles.num}>1</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('2')}

              style={styles.numTouch}>

              <Text style={styles.num}>2</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('3')}

              style={styles.numTouch}>

              <Text style={styles.num}>3</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('+')}

              style={styles.numTouch}>

              <Text style={styles.num}>+</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={styles.body}>

          <View style={styles.inBody}>

            <TouchableOpacity

              onPress={() => this.clickNum('4')}

              style={styles.numTouch}>

              <Text style={styles.num}>4</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('5')}

              style={styles.numTouch}>

              <Text style={styles.num}>5</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('6')}

              style={styles.numTouch}>

              <Text style={styles.num}>6</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('-')}

              style={styles.numTouch}>

              <Text style={styles.num}>-</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={styles.body}>

          <View style={styles.inBody}>

            <TouchableOpacity

              onPress={() => this.clickNum('7')}

              style={styles.numTouch}>

              <Text style={styles.num}>7</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('8')}

              style={styles.numTouch}>

              <Text style={styles.num}>8</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('9')}

              style={styles.numTouch}>

              <Text style={styles.num}>9</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('*')}

              style={styles.numTouch}>

              <Text style={styles.num}>*</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={styles.body}>

          <View style={styles.inBody}>

            <TouchableOpacity

              onPress={() => this.clickNum('Del')}

              style={styles.numTouch}>

              <Text style={styles.numSmall}>Del</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('0')}

              style={styles.numTouch}>

              <Text style={styles.num}>0</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('.')}

              style={styles.numTouch}>

              <Text style={styles.num}>.</Text>

            </TouchableOpacity>

            <TouchableOpacity

              onPress={() => this.clickNum('=')}

              style={styles.numTouch}>

              <Text style={styles.num}>=</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={styles.mini}><Text style={styles.numMini}>{num1} {cal} {num2}</Text></View>

      </View>

    );

  }

}

 

const styles = StyleSheet.create({

  allBody: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'stretch',

    padding: 15,

  },

  body: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'stretch',

  },

  mini: {

    flex: 0.3,

    justifyContent: 'center',

    alignItems: 'stretch',

    backgroundColor: 'lightgray',

    

  },

  inBody: {

    flexDirection: 'row',

  },

  top: {

    flex: 1,

    backgroundColor: 'lightgray',

    textAlign: 'right',

    textAlignVertical: 'center',

    fontSize: 30,

    paddingRight: 20,

  },

  num: {

    textAlign: 'center',

    textAlignVertical: 'center',

    fontSize: 30,

  },

  numTouch: {

    flex: 1,

  },

  numSmall: {

    flex: 1,

    textAlign: 'center',

    textAlignVertical: 'center',

    fontSize: 20,

    paddingTop: 5,

  },

  numMini: {

    textAlign: 'center',

    textAlignVertical: 'center',

    fontSize: 15,

  },

});

 

export default App;