react web game : 가위바위보 Hooks로 변경하기

react_webgame/main/RSP-class.jsx

@@ -21,7 +21,7 @@ const computerChoice = (imgCoord) => {
 class RSP extends Component {
   state = {
     result: "",
-    imgCoord: "0",
+    imgCoord: rspCoords.바위,
     score: 0,
   };
 

react_webgame/main/RSP.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 const rspCoords = {
   바위: "0",
@@ -18,100 +18,72 @@ const computerChoice = (imgCoord) => {
   })[0];
 };
 
-class RSP extends Component {
-  state = {
-    result: "",
-    imgCoord: "0",
-    score: 0,
-  };
+const RSP = () => {
+  const [result, setResult] = useState("");
+  const [imgCoord, setImgCoord] = useState(rspCoords.바위);
+  const [score, setScore] = useState(0);
+  const interval = useRef();
 
-  interval;
+  useEffect(() => {
+    // componentDidMount, componentDidUpdate 역할
+    // setTimeout(changeHand, 100);
+    interval.current = setInterval(changeHand, 100);
+    return () => {
+      // componentWillUnMount 역할
+      clearInterval(interval.current);
+    };
+  }, [imgCoord]);
 
-  componentDidMount() {
-    this.interval = setInterval(this.changeHand, 100);
-  }
-
-  componentWillUnMount() {
-    clearInterval(this.interval);
-  }
-
-  changeHand = () => {
-    const { imgCoord } = this.state;
+  const changeHand = () => {
     if (imgCoord === rspCoords.바위) {
-      this.setState({
-        imgCoord: rspCoords.가위,
-      });
+      setImgCoord(rspCoords.가위);
     } else if (imgCoord === rspCoords.가위) {
-      this.setState({
-        imgCoord: rspCoords.보,
-      });
+      setImgCoord(rspCoords.보);
     } else if (imgCoord === rspCoords.보) {
-      this.setState({
-        imgCoord: rspCoords.바위,
-      });
+      setImgCoord(rspCoords.바위);
     }
   };
 
-  onClickBtn = (choice) => () => {
-    const { imgCoord } = this.state;
-    clearInterval(this.interval);
+  const onClickBtn = (choice) => () => {
+    clearInterval(interval.current);
     const myScore = scores[choice];
     const cpuScore = scores[computerChoice(imgCoord)];
     const diff = myScore - cpuScore;
     if (diff === 0) {
-      this.setState({
-        result: "비겼습니다!",
-      });
+      setResult("비겼습니다!");
     } else if ([-1, 2].includes(diff)) {
-      this.setState((prevState) => {
-        return {
-          result: "이겼습니다!",
-          score: prevState.score + 1,
-        };
-      });
+      setResult("이겼습니다!");
+      setScore((prevScore) => prevScore + 1);
     } else {
-      this.setState((prevState) => {
-        return {
-          result: "졌습니다ㅠㅜ",
-          score: prevState.score - 1,
-        };
-      });
+      setResult("졌습니다ㅠㅜ");
+      setScore((prevScore) => prevScore - 1);
     }
-    setTimeout(() => {
-      this.interval = setInterval(this.changeHand, 100);
-    }, 2000);
+    setTimeout(changeHand, 2000);
   };
 
-  render() {
-    const { result, score, imgCoord } = this.state;
-    return (
-      <>
-        <div
-          id="computer"
-          style={{
-            background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0`,
-          }}
-        />
-        <div>
-          <button id="rock" className="btn" onClick={this.onClickBtn("바위")}>
-            바위
-          </button>
-          <button
-            id="scissor"
-            className="btn"
-            onClick={this.onClickBtn("가위")}
-          >
-            가위
-          </button>
-          <button id="paper" className="btn" onClick={this.onClickBtn("보")}>
-            보
-          </button>
-        </div>
-        <div>{result}</div>
-        <div>현재 {score}점</div>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <div
+        id="computer"
+        style={{
+          background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0`,
+        }}
+      />
+      <div>
+        <button id="rock" className="btn" onClick={onClickBtn("바위")}>
+          바위
+        </button>
+        <button id="scissor" className="btn" onClick={onClickBtn("가위")}>
+          가위
+        </button>
+        <button id="paper" className="btn" onClick={onClickBtn("보")}>
+          보
+        </button>
+      </div>
+      <div>{result}</div>
+      <div>현재 {score}점</div>
+    </>
+  );
+};
 
 export default RSP;