React.createRef

react_webgame/main/NumberBaseball-class.jsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import Try from './Try-class';
 
 // 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
@@ -36,6 +36,7 @@ class NumberBaseball extends PureComponent {
                 answer: getNumbers(),
                 tries: [],
             });
+            this.inputRef.current.focus();
         } else { 
             const answerArray = value.split('').map((v) => parseInt(v));
             let strike = 0;
@@ -64,6 +65,7 @@ class NumberBaseball extends PureComponent {
                         value: '',
                     }                      
                 });
+                this.inputRef.current.focus();
             }
         }
     }
@@ -74,10 +76,7 @@ class NumberBaseball extends PureComponent {
         })
     }
 
-    input;
-    onRefInput = (c) => {
-        this.input = c;
-    }
+    inputRef = createRef();
 
     render() {
         const { result, value, tries } = this.state;
@@ -85,7 +84,7 @@ class NumberBaseball extends PureComponent {
             <>
                 <h1>{result}</h1>
                 <form onSubmit={this.onSubmitForm}>
-                    <input ref={this.onRefInput} maxLength={4} value={value} onChange={this.onChangeInput}/>
+                    <input autoFocus ref={this.inputRef} maxLength={4} value={value} onChange={this.onChangeInput}/>
                     <button>입력!</button>
                 </form>
                 <div>시도: {tries.length}</div>

react_webgame/main/NumberBaseball.jsx

@@ -1,4 +1,4 @@
-import React, { useState, memo } from 'react';
+import React, { useState, useRef, memo } from 'react';
 import Try from './Try';
 
 // 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
@@ -17,7 +17,8 @@ const NumberBaseball = memo(() => {
     const [value, setvalue] = useState('');
     const [answer, setanswer] = useState(getNumbers());
     const [tries, settries] = useState([]);
-    
+    const inputRef = useRef(null);
+
     const onSubmitForm = (e) => {
         e.preventDefault();
         if(value === answer.join('')) { // 정답
@@ -29,6 +30,7 @@ const NumberBaseball = memo(() => {
             setvalue('');
             setanswer(getNumbers());
             settries([]);
+            inputRef.current.focus();
         } else { 
             const answerArray = value.split('').map((v) => parseInt(v));
             let strike = 0;
@@ -52,6 +54,7 @@ const NumberBaseball = memo(() => {
                 })
                 setvalue('');
             }
+            inputRef.current.focus();
         }
     }
 
@@ -63,7 +66,7 @@ const NumberBaseball = memo(() => {
         <>
             <h1>{result}</h1>
             <form onSubmit={onSubmitForm}>
-                <input maxLength={4} value={value} onChange={onChangeInput}/>
+                <input ref={inputRef} maxLength={4} value={value} onChange={onChangeInput}/>
                 <button>입력!</button>
             </form>
             <div>시도: {tries.length}</div>

react_webgame/main/client.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 
-import Test from './NumberBaseball';
+import Test from './NumberBaseball-class';
 
 
 ReactDom.render(<Test />, document.querySelector('#root'));