React - 소수판별기 구현

• 소수판별하는 함수 만들어서 리액트에 적용
• 숫자를 입력하고 버튼 누르면 1~해당 숫자 사이의 소수 갯수를 나타냄

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

// 소수 판별기(넘겨진 값이 소수인지 아닌지)
function isPrimeNumber(num) {
	if (num <= 1) return false;
	for (let i = 2; i < num; i++) {
		if (num % i == 0) {
			return false;
		}
	}
	return true;
}

// 1부터 n까지 수 중에서 소수만 배열담아서 리턴
function getPrimeNumbers(maxValue) {
	const primeNumbers = [];

	for (let i = 1; i <= maxValue; i++) {
		if (isPrimeNumber(i)) {
			primeNumbers.push(i);
		}
	}

	return primeNumbers;
}

function getPrimeNumbersCount(maxValue) {
	return getPrimeNumbers(maxValue).length;
}

const App = () => {
	const [primeNumberCount, setPrimeNumberCount] = useState(0);

	const onSubmit = (e) => {
		e.preventDefault();

		const form = e.target;

		form.number.value = form.number.value.trim();

		if (form.number.value.length == 0) {
			alert("숫자 써");
			form.number.focus();
			return;
		}

		const number = form.number.valueAsNumber;
		form.number.value = "";
		form.number.focus();

		const primeNumberCount = getPrimeNumbersCount(number);
		setPrimeNumberCount(primeNumberCount);

		alert(`네가 입력한 숫자는 ${number} (이)다.`);
	};

	return (
		<>
			<form onSubmit={onSubmit}>
				<span class="text-sm ml-3">숫자:</span>
				<input
					type="number"
					name="number"
					className="input input-bordered ml-3"
					placeholder="숫자 입력해"
					defaultValue="0"
				/>
				<button className="btn btn-outline btn-info ml-3" type="submit">
					찾기
				</button>
				<hr class="mt-2" />
				<div class="text-xl m-10">소수의 갯수 : {primeNumberCount}</div>
			</form>
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

• 찾기 버튼의 type을 submit으로 설정하고 form의 onSubmit을 통해 submit할 때 {onSubmit}를 실행
• onSubmit = (e)
  1. e.preventDefault(); -> 기본 제출 동작을 방지
  2. const form = e.target; -> 이벤트에서 form을 가져옴
  3. const number = form.number.valueAsNumber; -> 입력된 값을 숫자로 변환
  4. const primeNumberCount = getPrimeNumbersCount(number); -> 위의 숫자를 getPrimeNumbersCount 함수에 넣어서 소수인지 아닌지 판별해서 
  5. setPrimeNumberCount(primeNumberCount); -> 소수이면 리턴된 값을 setPrimeNumberCount해줌