[실습] Counter 만들기

• App.js에 코드를 작성합니다.
• + 1 버튼을 누를 때마다 숫자가 + 1 증가 합니다.
• - 1 버튼을 누를 때마다 숫자가 - 1 감소 합니다.

---

//App.js

import React, { useState } from "react";

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

  const onClickPlus = () => {
    setNum(num + 1);
  };

  const onClickminus = () => {
    setNum(num - 1);
  };

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

export default App;

 

 

기능은 완료했는데 0과 버튼의 줄을 다르게 하고싶었는데 

{num}을 <div>로 감싸도 안되고 버튼 div에서 빼도 안되고 

답봤는데 안에 div로감싸서 {num}을 넣음 아까 왜안됐지???

//App.js

import React, { useState } from "react";

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

  const onClickPlus = () => {
    setNum(num + 1);
  };

  const onClickminus = () => {
    setNum(num - 1);
  };

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

export default App;

기능이랑 위치까지 완성!