number baseball hooks

react_webgame/main/NumberBaseball-class.jsx

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import Try from './Try';
+
+// 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
+function getNumbers() {
+    const candidate = [1,2,3,4,5,6,7,8,9];
+    const array = [];
+    for (let i = 0; i < 4; i++) {
+        const chosen = candidate.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
+        array.push(chosen);
+    }
+    return array;
+}
+
+class NumberBaseball extends Component {
+    state = {
+        result: '',
+        value: '',
+        answer: getNumbers(),
+        tries: [], // push 쓰면 안됨
+    };
+
+    onSubmitForm = (e) => {
+        const { value, tries, answer} = this.state;
+        e.preventDefault();
+        if(value === answer.join('')) { // 정답
+            this.setState((prevState) => {
+                return {
+                    result: '홈런!',
+                    tries: [...prevState.tries, { try: value, result: '홈런!'}],
+                }
+            });
+            alert('게임을 다시 시작합니다.');
+            this.setState({
+                value: '',
+                answer: getNumbers(),
+                tries: [],
+            });
+        } else { 
+            const answerArray = value.split('').map((v) => parseInt(v));
+            let strike = 0;
+            let ball = 0;
+            if(tries.length >= 9) { // 10번이상 틀렸을 때
+                this.setState( {
+                    result: `실패! 답은 ${answer.join(',')} 였습니다!`,
+                });
+                alert('게임을 다시 시작합니다.');
+                this.setState({
+                    value: '',
+                    answer: getNumbers(),
+                    tries: [],
+                });
+            } else {
+                for (let i = 0; i < 4; i++) {
+                    if(answerArray[i] === answer[i]) {
+                        strike++;
+                    } else if (answer.includes(answerArray[i])) {
+                        ball++;
+                    }
+                }
+                this.setState((prevState) => {
+                    return {
+                        tries: [...prevState.tries, {try: value, result: `${strike} 스트라이크, ${ball} 볼 입니다.`}],
+                        value: '',
+                    }                      
+                });
+            }
+        }
+    }
+
+    onChangeInput = (e) => {
+        this.setState( {
+            value: e.target.value,
+        })
+    }
+
+    input;
+    onRefInput = (c) => {
+        this.input = c;
+    }
+
+    render() {
+        const { result, value, tries } = this.state;
+        return (
+            <>
+                <h1>{result}</h1>
+                <form onSubmit={this.onSubmitForm}>
+                    <input ref={this.onRefInput} maxLength={4} value={value} onChange={this.onChangeInput}/>
+                    <button>입력!</button>
+                </form>
+                <div>시도: {tries.length}</div>
+                <ul>
+                    {tries.map((v, i) => {
+                        return (
+                            <Try key={`${i + 1}차 시도 :`} tryInfo={v} index={i} />
+                        )
+                    })}
+                </ul>
+            </>
+        )
+    }
+}
+
+export default NumberBaseball; // import NumberBaseball

react_webgame/main/NumberBaseball.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import Try from './Try';
 
 // 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
@@ -12,89 +12,69 @@ function getNumbers() {
     return array;
 }
 
-class NumberBaseball extends Component {
-    state = {
-        result: '',
-        value: '',
-        answer: getNumbers(),
-        tries: [], // push 쓰면 안됨
-    };
+const NumberBaseball = () => {
+    const [result, setresult] = useState('');
+    const [value, setvalue] = useState('');
+    const [answer, setanswer] = useState(getNumbers());
+    const [tries, settries] = useState([]);
     
-    onSubmitForm = (e) => {
-        const { value, tries, answer} = this.state;
+    const onSubmitForm = (e) => {
         e.preventDefault();
         if(value === answer.join('')) { // 정답
-            this.setState({
-                result: '홈런!',
-                tries: [...tries, { try: value, result: '홈런!'}],
+            setresult('홈런!');
+            settries((prevTries) => {
+                return [...prevTries, { try: value, result: '홈런!'}]
             })
             alert('게임을 다시 시작합니다.');
-            this.setState({
-                value: '',
-                answer: getNumbers(),
-                tries: [],
-            });
+            setvalue('');
+            setanswer(getNumbers());
+            settries([]);
         } else { 
             const answerArray = value.split('').map((v) => parseInt(v));
             let strike = 0;
-            let ball = 0;
+            let ball = 0 ;
             if(tries.length >= 9) { // 10번이상 틀렸을 때
-                this.setState( {
-                    result: `실패! 답은 ${answer.join(',')} 였습니다!`,
-                });
+                setresult(`실패! 답은 ${answer.join(',')} 였습니다!`);
                 alert('게임을 다시 시작합니다.');
-                this.setState({
-                    value: '',
-                    answer: getNumbers(),
-                    tries: [],
-                });
+                setvalue('');
+                setanswer(getNumbers());
+                settries([]);
             } else {
                 for (let i = 0; i < 4; i++) {
                     if(answerArray[i] === answer[i]) {
                         strike++;
                     } else if (answer.includes(answerArray[i])) {
                         ball++;
-                    }
+                     }
                 }
-                this.setState( {
-                    tries: [...tries, {try: value, result: `${strike} 스트라이크, ${ball} 볼 입니다.`}],
-                    value: '',
+                settries((prevTries) => {
+                    return [...tries, {try: value, result: `${strike} 스트라이크, ${ball} 볼 입니다.`}]
                 })
+                setvalue('');
             }
         }
     }
 
-    onChangeInput = (e) => {
-        this.setState( {
-            value: e.target.value,
-        })
+    const onChangeInput = (e) => {
+        setvalue(e.target.value);
     }
     
-    input;
-    onRefInput = (c) => {
-        this.input = c;
-    }
-
-    render() {
-        const { result, value, tries } = this.state;
-        return (
-            <>
-                <h1>{result}</h1>
-                <form onSubmit={this.onSubmitForm}>
-                    <input ref={this.onRefInput} maxLength={4} value={value} onChange={this.onChangeInput}/>
-                    <button>입력!</button>
-                </form>
-                <div>시도: {tries.length}</div>
-                <ul>
-                    {tries.map((v, i) => {
-                        return (
-                            <Try key={`${i + 1}차 시도 :`} tryInfo={v} index={i} />
-                        )
-                    })}
-                </ul>
-            </>
-        )
-    }
+    return (
+        <>
+            <h1>{result}</h1>
+            <form onSubmit={onSubmitForm}>
+                <input maxLength={4} value={value} onChange={onChangeInput}/>
+                <button>입력!</button>
+            </form>
+            <div>시도: {tries.length}</div>
+            <ul>
+                {tries.map((v, i) => {
+                    return (
+                        <Try key={`${i + 1}차 시도 :`} tryInfo={v} index={i} />
+                    )
+                })}
+            </ul>
+        </>
+    )
 }
-
 export default NumberBaseball; // import NumberBaseball

react_webgame/main/Try-class.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+class Try extends Component {
+    render() {
+        const { tryInfo } = this.props;
+        return (
+            <li>
+                <div>{tryInfo.try}</div>
+                <div>{tryInfo.result}</div>    
+            </li>
+        )
+    }
+}
+
+export default Try;

react_webgame/main/Try.jsx

@@ -1,15 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 
-class Try extends Component {
-    render() {
-        const { tryInfo } = this.props;
-        return (
-            <li>
-                <div>{tryInfo.try}</div>
-                <div>{tryInfo.result}</div>    
-            </li>
-        )
-    }
+const Try = ({ tryInfo }) => {
+    return (
+        <li>
+            <div>{tryInfo.try}</div>
+            <div>{tryInfo.result}</div>    
+        </li>
+    )
 }
-
 export default Try;