TIL - useState와 이벤트 핸들러를 이용한 실습 "좋아요 +, 싫어요 - 호감도 숫자 구현!"

WHAT TO MAKE

0이라는 숫자영역이 있다.
+1 버튼을 누르면 이 숫자가 1씩 증가, -1 버튼을 누르면 1씩 감소하도록 만들어보자! (아래 그림 참조)

---

HOW TO MAKE

1. CRA로 리액트 작업할 폴더 생성
2. App.js 에서 작업 시작
   • React에서 useState 가져오기.
     useState는 함수 컴포넌트에서 state를 사용할 수 있게 해주는 React의 Hook이다!
   • state를 만들어보자.
     • count라는 이름의 상태 변수와, setCount라는 이름의 상태 변경 함수를 선언!
     • useState(0)을 호출하여 초기값은 0으로 초기화해준다.
     • setCount 함수를 이후 호출하여 count 변수의 값을 변경해준다.
   • 이벤트 핸들러를 만든다.
     • 화살표 함수를 사용해 count 가 1씩 증가하는 함수를 만든다. 버튼 클릭시 count 변수의 값을 1씩 증가시키고, 변경된 값은 setCount 함수를 사용해서 업데이트한다.
   • JSX(쟉스) 문법을 사용하여 컴포넌트 만들어주기! 
3. 완성~~~

import "./App.css";
import { useState } from "react";

// *아래 App() 이 컴포넌트이며 이 컴포넌트의 이름은 반드시 대문자로 시작해야함!

function App() {
  // 화면이 렌더링되기 위해서는 state의 변화가 있어야하므로,
  // 화면에 있는 숫자는 state의 형태로 관리되어야한다!

  // 1. 값이 변해야하는, 즉 화면에 UI를 렌더링해줄 state를 먼저 만들어보자
  const [count, setCount] = useState(0);
  const plustButtonClickHandler = () => {
    const newPlustCount = count + 1;
    setCount(newPlustCount);
  };

  // +1 버튼을 누를 때마다 값이 1씩 증가하는 함수 만들기
  // -1 버튼을 누를 때마다 값이 1씩 감소하는 함수 만들기
  return (
    <div>
      <div>{count}</div>
      <div>
        <button
          onClick={() => {
            const newCount = count - 1;
            setCount(newCount);
          }}
        >
          -1
        </button>
        <button onClick={plustButtonClickHandler}>+1</button>
      </div>
    </div>
  );
}

export default App;