React 타임어택

1.claculator 만들기(20분)
2.Todo-list 만들기(40분)

1. 문제 풀이

import { useState } from "react";


const App = () => {
  
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0)
  
  const handleCountUp = (el) => {
    if ( !count) return ('숫자를 입력해 주세요')

    setCount(count => count + el)
  }
  const handleCountDown = (el) => {
    setCount(count => count - el)
  }

  const handleCountReset = () => {
    setCount('')
  }
console.log(useState)
  return (
    <div>
      <h1>덧셈과 뺄셈이 가능한 앱 만들기</h1>
      <div>
        <input /> 만큼을
        <button onClick={handleCountUp}>더할게요</button>
        <button onClick={handleCountDown}>뺄게요</button>
        <button onClick={handleCountReset}>초기화</button>
      </div>
      <hr />
      <div>
        <h3>결과</h3>
        <p>0</p>
      </div>
    </div>
  );
}

export default App

• 다른 문제 풀이

const [originNum, setOriginNum] = useState(0);
const [inputNum, setInputNum] = useState(0);
const [resultNum, setResultNum] = useState(0);

const onChangeNum = (e) => {
  setInputNum(Number(e.target.value));
};

const addNum = () => {
  const newResult = originNum + inputNum;
  setResultNum(newResult);
  setOriginNum(newResult);
};

const subtractNum = () => {
  const newResult = originNum - inputNum;
  setResultNum(newResult);
  setOriginNum(newResult);
};

const resetNum = () => {
  setOriginNum(0);
  setInputNum(0);
  setResultNum(0);
};

return (
  <div>
    <h1>덧셈과 뺄셈이 가능한 앱 만들기</h1>
    <div>
      <input onChange={onChangeNum} value={inputNum} type="text" /> 만큼을{" "}
      <button onClick={addNum}>더하기</button>{" "}
      <button onClick={subtractNum}>빼기</button>
      <button onClick={resetNum}>리셋</button>
    </div>
    <hr />
    <div>
      <h3>결과</h3>
      <p>{resultNum}</p>
    </div>
  </div>
);

리액트 입문 후 첫 타임어택이라 긴장도 많이했고
첫 문제였던 계산기 만들기는 input을 만들어 그 안에 숫자를 입력, 값을 넣어 반환을 했어야 했기에 단지 counter 만드는 문제의 응용 부분이였다.
다만 그 응용문제에 내가 가지고 있던 지식을 적용하지 못해 풀지 못한 것이라고 본다.
응용적인 부분에 있어서 취약한 것을 잘 알기에 이 부분에 대해 반복적인 학습과 타이핑을 통해 손과 머리에 익히는 방향을 잡아야겠다.