[5주차] 리액트입문: 카운터 앱 만들기

카운터 앱 만들기

기능 : +1 을 누르면 1씩 늘어나고, -1 을 누르면 1씩 줄어드는 기능

 

import logo from './logo.svg';
import './App.css';
import {useState} from 'react';

function App() {
  const [num, setNum] = useState(0);
  const plusHandler = function() {
    const plus = () => num + 1;
    setNum(plus);
  }

  const minusHandler = function(){
    const minus = () => num - 1;
    setNum(minus);
  }


  return (
    <div>
      <div>{num}</div>
      <button onClick={plusHandler}>+ 1</button>
      <button onClick={minusHandler}>- 1</button>
    </div>
  );
}

export default App;

---

배운 점, 유의할 점

• useState(); 를 사용하려면 반드시 import 로 끌고와야 한다

import {useState} from 'react';

 

• 구조분해할당 시, 중괄호가 아니라 대괄호로 묶는다 계속 무의식적으로 중괄호로 묶다가 에러났다

  const [num, setNum] = useState(0);

 

• return (); 안에 들어가는 부분은 왠만하면 모두 {} 중괄호를 쓴다.

return (
    <div>
      <div>{num}</div>
      <button onClick={plusHandler}>+ 1</button>
      <button onClick={minusHandler}>- 1</button>
    </div>
);