인프런 커뮤니티 질문&답변

제가 설치를 이상하게 했는지, 잘 되지 않아 저는 프로젝트 생성을 다음과 같은 절차로 진행했습니다.

1. npx create-expo-app <앱 이름> --template

2. 세 번째(blank) :typescript 선택

3. npx expo start를 실행

4. expo 앱에서 QR 코드로 보기

위와 같은 절차를 거쳐, 복붙으로도 진행해봤을 때의 문제점은 안드로이드 기준으로 기호들이 나타나지 않는다는 점이었습니다. 무지성으로 복붙한 것이 문제였는데요. 문제는 margin 값들의 값이 컸기 때문이었습니다.

혹시 저 같이 잘 안 되시는 분들이 있을까 하여, 좀 헤맸던 기록으로 남깁니다~

ps. 아래 별도로 올려주신 코드 중에 const [result, setResult] = useState('') 에서 useState('0')으로 변경이 필요합니다.

그리고 알려주신 코드를 복붙해서 했을 때 제대로 나오지 않아, GPT의 도움을 받아 수정해보았습니다.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Entypo from 'react-native-vector-icons/Entypo';
import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
import styled from 'styled-components/native';
import { evaluate } from 'mathjs';

const NumberButton = styled.TouchableOpacity`
  background-color: #b6b6b6;
  width: 65px;
  height: 65px;
  border-radius: 35px;
  margin: 8px;
  align-items: center;
  justify-content: center;
`;

const OperatorButton = styled(NumberButton)`
  background-color: #0084ff;
`;

const NumberText = styled.Text`
  font-size: 30px;
  color: white;
`;

const ResultText = styled.Text`
  font-size: 65px;
  padding: 20px;
  margin-top: 50px;
  color: white;
  text-align: right;
`;

const App = () => {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('0');

  const handlePress = (value) => {
    const newInput = input + value;
    setInput(newInput);
    setResult(newInput); // 입력값을 바로 결과창에 표시
  };

  const handleOperation = (op) => {
    if (input && !['+', '-', '*', '/'].includes(input.slice(-1))) {
      const newInput = input + op;
      setInput(newInput);
      setResult(newInput); // 연산자도 바로 결과창에 표시
    }
  };

  const calculate = () => {
    try {
      const calculatedResult = evaluate(input).toString();
      setResult(calculatedResult);
      setInput(calculatedResult); // 계산 결과를 새로운 입력값으로 설정
    } catch (e) {
      setResult('Error');
      setInput('');
    }
  };

  const clear = () => {
    setInput('');
    setResult('0');
  };

  return (
    <View style={{ flex: 1, backgroundColor: '#181818' }}>
      <ResultText>{result}</ResultText>

      <View style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 20 }}>
        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
          <View style={{ paddingRight: 20 }}>
            <View
              style={{ flexDirection: 'row', flexWrap: 'wrap', width: 250 }}
            >
              {[...Array(10).keys()].reverse().map((num) => (
                <NumberButton
                  key={num}
                  onPress={() => handlePress(num.toString())}
                >
                  <NumberText>{num}</NumberText>
                </NumberButton>
              ))}
              <NumberButton onPress={clear}>
                <MaterialIcons name="restart-alt" size={30} color="white" />
              </NumberButton>
              <NumberButton onPress={() => handlePress('.')}>
                <Entypo name="dot-single" size={30} color="white" />
              </NumberButton>
            </View>
          </View>

          <View style={{ marginTop: -81 }}>
            <OperatorButton onPress={calculate}>
              <MaterialCommunityIcons name="equal" size={30} color="white" />
            </OperatorButton>
            <OperatorButton onPress={() => handleOperation('+')}>
              <Entypo name="plus" size={30} color="white" />
            </OperatorButton>
            <OperatorButton onPress={() => handleOperation('-')}>
              <Entypo name="minus" size={30} color="white" />
            </OperatorButton>
            <OperatorButton onPress={() => handleOperation('*')}>
              <Entypo name="cross" size={30} color="white" />
            </OperatorButton>
            <OperatorButton onPress={() => handleOperation('/')}>
              <FontAwesome6 name="divide" size={30} color="white" />
            </OperatorButton>
          </View>
        </View>
      </View>
    </View>
  );
};

export default App;