버튼 영역을 어떻게 준비해야하나

• 1~9번까지
• 0과 =
• C - + 부분

<View style={styles.buttonContainer}>
	<View style={styles.leftPad}>
		<View style={styles.number}></View>
		<View style={styles.bottom}></View>
	</View>
	<View style={styles.operator}></View>
</View>

일단 위와 같이 대략적인 구분선을 만들어두고

buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'skyblue',
},
leftPad: {},
number: {},
bottom: {
  flexDirection: 'row',
},
operator: {},

위와 같이 설정해둔다.

크기 세팅하기

useWindowDimensions 라는 애를 사용하면 이 디바이스의 크기를 가져올 수 있다.

const width = useWindowDimensions().width / 4;

너비의 4분의 1만 가져오는 코드

<Button
	title="1"
	onPress={() => {}}
	buttonStyle={{ width, height: width }}
></Button>

구분선 주기

버튼을 네개를 만들고

height를 줬는데 이를 동적으로 변경하려면 크게 위 아래 두부분으로 나뉘었던 부분을 윗 부분만 flex를 줘서 아랫부분은 동적으로 준다.

그 후 구분선을 주고 싶다면 borderWidth를 쓰게 되면 두개가 겹치게 되는 순간 더 굵게 표시되므로

적당한 간격으로 띄우는 것을 추천한다.

아래와 같이 설정해주면 된다.

1. 먼저 공간을 주기 위해 width 설정

const width = (useWindowDimensions().width - 5) / 4;

2. 그 후 margin-bottom을 주기

<Button
	title="1"
	onPress={() => {}}
	buttonStyle={{ width, height: width, marginBottom: 1 }}
></Button>

버튼 배치하기

flex-wrap이란 걸 사용하면 자동으로 줄바꿈해준다.

number: {
    flexDirection: 'row',
    flexWrap: 'wrap-reverse',
    justifyContent: 'space-evenly',
  },

위와 같이 wrap -reverse로 사용하면 순서도 바꿀 수 있다.

버튼 이벤트 만들기

숫자를 변동시키기 위해선 state 변경함수를 활용하여

const onPressNumber = num => {
	setResult(prev => prev * 10 + num);
};

위와 같이 코드를 만들어주면 숫자가 바뀌는 것을 확인할 수 있다.

또한 세자리마다 콤마를 찍어주고 싶다면

{
	result.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

위와 같이 정규표현식으로 진행한다.

계산식 만들기

계산식에 대하여… 배열로 받아서 [ 숫자, 연산자, 숫자 ] 식으로 받아올 것이다.

// 공식 배열
const [formular, setFormular] = useState([]);

const onPressNumber = num => {
	console.log(formular);
	const last = formular[formular.length - 1];

	// 숫자가 아닐 땐 교체해줌.
	if (isNaN(last)) {
		setResult(num);
		setFormular(prev => [...prev, num]);
	} else {
		// 숫자가 일 땐 다음자리로 더해줌
		const newNum = (last ?? 0) * 10 + num;
		setResult(newNum);
		setFormular(prev => {
			prev.pop();
			return [...prev, newNum];
		});
	}
};

// 연산자의 종류에 맞게 공식 배열에 넣어줌.
const onPressOperator = operator => {
	console.log(formular);
	switch (operator) {
		case Operators.CLEAR:
			setResult(0);
			setFormular([]);
			break;
		case Operators.EQUAL:
			//TODO
			break;
		default:
			// +, -
			const last = formular[formular.length - 1];
			if ([Operators.PLUS, Operators.MINUS].includes(last)) {
				setFormular(prev => {
					prev.pop();
					return [...prev, operator];
				});
			} else {
				setFormular(prev => [...prev, operator]);
			}
			// TODO
			break;
	}
};