[리액트] 구구단 만들기

리액트는 spa이다. 

data가 변경되면 화면이 변경되는 거!

함수 컴포넌트는 this 쓸 일이 없고, 코드가 짧아서 클래스 컴포넌트보다 많이 사용된다. 

 

하나의 사이트에 여러 state가 존재한다. 

객체를 함부로 바꾸지 말아라. (불변성)

배열도 객체인데, 복사한 배열을 바꿔라. 

 

바뀌는 것은 state 

안 바뀌는 것은 그냥 태그로 놔두기. 

 

구구단 컴포넌트 만들기

import "./App.css";
import GuGuDan from "./like-button";
function App() {
  return (
    <div className="App">
      <GuGuDan />
    </div>
  );
}

export default App;

 

import React, { useState } from "react";

function GuGuDan() {
  //랜덤한 숫자
  const [first, setfirst] = useState(Math.ceil(Math.random() * 9));
  const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");
  //   const checkAnswer = () => {
  //     first * second === value ? setResult("정답") : setResult("땡");
  //   };

  const checkAnswer = () => {
    const answer = first * second;
    if (parseInt(value, 10) === answer) {
      //10진수로 변환
      setResult("정답");
    } else {
      setResult("땡");
    }
  };
  return (
    <>
      {first} 곱하기 {second}는? <br />
      <input
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button onClick={checkAnswer}>입력!</button> <br />
        {value}{result}
    </>
  );
}
export default GuGuDan;

결과만 보고 코드를 짰었는데 10진수 변환을 하지 않고 삼항연산자로만 했었다. 

result가 제대로 나오지 않았다. 10진수로 변환을 반드시 해야 함!!!

강의에서는 class 문법으로 코드를 짰는데 저는 함수 문법이 더 편해서 함수로 짰습니다. 

여러 개의 구구단 만들기

app.js에 컴포넌트 여러 개 쓰면 된다. 

import "./App.css";
import GuGuDan from "./like-button";
function App() {
  return (
    <div className="App">
      <GuGuDan />
      <GuGuDan />
      <GuGuDan />
    </div>
  );
}

export default App;

 

return 안에 감싸는태그는 <Fragment> <div> <> 세개 중 하나 쓰기

form이 들어가면 onSubmit 쓰기

form이 없으면 onClick

 

직접 만든 함수는 화살표 함수 쓰기

return 안에는 화살표 함수 안 써도 된다. 

 

입력 버튼 클릭시 정답알려주는 구구단

 

import React, { useState } from "react";

function GuGuDan() {
  //랜덤한 숫자
  const [first, setfirst] = useState(Math.ceil(Math.random() * 9));
  const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");
  //   const checkAnswer = () => {
  //     first * second === value ? setResult("정답") : setResult("땡");
  //   };

  const checkAnswer = () => {
    setResult(`정답: ${first * second}`);
  };
  return (
    <>
      {first} 곱하기 {second}는? <br />
      <input
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button onClick={checkAnswer}>입력!</button> <br />
      {result}
      <br />
    </>
  );
}
export default GuGuDan;