hooks - memo

react_webgame/main/NumberBaseball-class.jsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import Try from './Try';
+import React, { PureComponent } from 'react';
+import Try from './Try-class';
 
 // 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
 function getNumbers() {
@@ -12,7 +12,7 @@ function getNumbers() {
     return array;
 }
 
-class NumberBaseball extends Component {
+class NumberBaseball extends PureComponent {
     state = {
         result: '',
         value: '',

react_webgame/main/NumberBaseball.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, memo } from 'react';
 import Try from './Try';
 
 // 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
@@ -12,7 +12,7 @@ function getNumbers() {
     return array;
 }
 
-const NumberBaseball = () => {
+const NumberBaseball = memo(() => {
     const [result, setresult] = useState('');
     const [value, setvalue] = useState('');
     const [answer, setanswer] = useState(getNumbers());
@@ -76,5 +76,5 @@ const NumberBaseball = () => {
             </ul>
         </>
     )
-}
+});
 export default NumberBaseball; // import NumberBaseball

react_webgame/main/Try-class.jsx

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-class Try extends Component {
+class Try extends PureComponent {
     render() {
         const { tryInfo } = this.props;
         return (

react_webgame/main/Try.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-const Try = ({ tryInfo }) => {
+const Try = memo(({ tryInfo }) => {
     return (
         <li>
             <div>{tryInfo.try}</div>
             <div>{tryInfo.result}</div>    
         </li>
     )
-}
+});
 export default Try;

react_webgame/main/client.jsx

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