[React] State (버튼 클릭 시 증가/감소)

📌 State란 ?

• 상태라고 한다. 즉 어떠한 사물이 현재 가지고 있는 모양이나 또는 형편을 뜻한다
• 리액트에서는 각각의 컴포넌트에 상태를 의미하는 값이자 변경할 수 있는 값인 state를 만들 수 있다
• 하나의 컴포넌트에 여러 개의 state를 만드는 것도 가능하다

📌 State 생성

< React에서 제공하는 내장함수 >

• useState를 사용한다. 사용할 때는 항상 상단에 불러와야 한다

import { useState } from "react";

• useState 는 두개의 요소를 담은 배열을 반환하는데 첫번째 요소는 state의 현재 값이고, 두번째 요소는 state를 변경 시키는 상태 변화 함수가 있다

<작성방법>

const [state, setState] = useState(0); // 괄호안에는 초기값을 적어주면 된다 !

📌 구조분해할당 방법

• 초기값을 화면에 렌더링 할 때

<h1>{state}</h1> // 0 렌더링 됨 (위에 작성한 코드 확인)

🔅 예제 ) 버튼 클릭 시 증가/감소

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1> // 0 렌더링
      <button
        onClick={() => {
          setCount(count + 1); //setCount는 상태변화함수
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          setCount(count - 1);
        }}
      >
        -
      </button>
    </div>
  );
};

export default Counter;

증가/감소 기능은 같은 방식이다 +, -만 달라졌을 뿐이지 +로 설명을 해보자면 count의 초기값은 0이다 초기값의 값을 변경하려면 상태변화함수인 setCount를 사용해서 변경을 해야 하는데 버튼 클릭 시 1씩 증가가 되어야 하니까 setCount 함수에 count + 1 을 넣게 된다 이 말은 즉 초기값인 0에 1을 클릭할 때마다 계속 1씩 더하라는 말이다

⚠️ useState 함수는 리액트 Hooks 중 하나이다 useState 함수는 react 컴포넌트 함수 내에서만 불러 올 수 있고, 그 밖에서는 불러 올 수 없다