State

State란?

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값.

• 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용 할 수 있는 상태값.

  State 활용

  state를 쓸 때는 useState라는 훅을 가져와서 써야합니다.

  const [state, setState function] =useState(defeaultValue)

  위와 같은 형태로 useState를 사용한다.

• state: 동적으로 관리하고자 하는 상태값입니다. 해당 상태의 초기값은 useState hook을 호출할 때 인자(defaultValue)로 넘겨줍니다.

• setState : 첫 번째 요소의 상태값을 업데이트 해주는 함수입니다. state를 초기값에서 다른 값으로 변경하고 싶다면 setState를 통해서 변경해줘야 합니다.

import React, { useState } from "react";
const Counter = () => {
  const [num, setNumber] = useState(0);
  
  const increase = () => {
    setNumber(num + 1);
  };

  const decrease = () => {
    setNumber(num - 1);
  };
  return (
    <div>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
      <p>{num}</p>