State를 사용해 Counter컴포넌트 만들기

State란?

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태
• 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값
• 컴포넌트 내에서 정의하고 사용하며 얼마든지 변경 가능

위 와 같이 +1 버튼을 누를 때마다 아래에 있는 0이 1씩 늘어나거나 -1 버튼을 누를 때마다 1이 줄어드는 컴포넌트를 만들어 보겠습니당.

import React, { useState } from "react";

const Increase = () => {
  
  return (
    <div>
      <button>+1</button>
      <button>-1</button>
      <p>0<p>
    </div>
  );
};

일단 이렇게 만들어 놓으면 위에 보이는 것처럼 만들어 진 것입니다. 리액트에서는 버튼을 누를 때마다 p태그에 있는 0이 바뀌기 원하실때 state를 사용합니다. 일단 현재 값과 결과 값을 선언해 줍니다.

import React, { useState } from "react";

const Counter = () => {
  const [num, setNumber] =useState(0)
  
  return (
    <div>
      <button>+1</button>
      <button>-1</button>
      <p>0<p>
    </div>
  );
};

이때 주의 해줘야 할 점은 컴포넌트 선언문 내에서 최상위 블록 내에서 사용해야 합니다. 즉 return문 안에서 사용하면 에러가 발생한다는 뜻인데 '난 아무것도 모르겠다' 하시면 return문 위에다가 써줍니다. 이제 useState를 써줬으니까 button태그에 함수를 넣어줘야 하는데 +1에는 increase라는 함수, -1에는 decrease함수를 주도록 하겠습니다.

import React, { useState } from "react";

const Counter = () => {
  const [num, setNumber] =useState(0)
  
  return (
    <div>
      <button OnClick={increase}>+1</button>
      <button OnClick={decrease}>-1</button>
      <p>0<p>
    </div>
  );
};

여기서 함수를 써준다고 했는데 왜 중괄호를 넣냐는 의문이 들 수 있는데 함수나 자바스크립트에서 가져온 것들은 중괄호를 넣어줍니다. 버튼에 각각 함수를 넣어줬는데 함수 선언을 아직 안해줬습니다. 이제 넣어보겠습니다.

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>0<p>
    </div>
  );
};

state는 상태값입니다. num은 기존 상태값 setNumber는 바뀐 상태값이기 때문에
쉽게 생각하면 아래와 같습니다.

num=num+1   //좌변 num이 setNumber로 바뀐 느낌 
setNumber=num+1 

마지막으로 p태그에 바뀐 값을 보여줘야겠죠. 그럼 0 대신 무엇을 넣어줘야할까요?

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>
    </div>
  );
};

num을 넣는 것으로 마치겠습니다.