React | useState로 동적인 값 관리하기

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고 useState는 Hooks 중 하나이다.

버튼을 누르면 숫자가 오르고 내려가는 Counter 기능을 만들어보자.

src폴더에 Counter.js 컴포넌트를 만들어주었다.

import React from 'react';

function Counter() {
  return (
    <div>
      <h2>0</h2>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

아래와 같은 화면이 렌더링된다.

여기에 동적인 값을 넣어주기 위해 코드를 수정해주자.

import React from "react";
import { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);

  const increase = () => {
    setNumber(number + 1);
  };

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

export default Counter;

import { useState } from "react"; : useState를 쓰기 위해 리액트 패키지에서 useState라는 함수를 import 해온다.

const [number, setNumber] = useState(0); => useState를 선언해준다.
useState()를 호출하면 배열을 반환하는데 그 배열의 첫번째 원소(number)는 현재 상태값이고, 두번째 원소(setNumber)는 첫번째 원소인 현재 상태값을 업데이트해주는 함수이다.
☺️ 그러니까 저 선언은 "number에 새로운 상태 값을 정의하겠습니다!!!" 라는 뜻이다.

useState(0)
숫자 0은 초기값을 의미한다. useState는 인자로 초기 state 설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 딱 한 번 사용된다.

const increase = () => {
    setNumber(number + 1);
  };

  const decrease = () => {
    setNumber(number - 1);
  };

여기서 setNumber 비동기로 처리가 된다. 비동기는 응답과 상관없이 다음 동작을 처리하는 방식이다.비동기로 처리되는 이유는 이 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능이슈가 생길 수 있어서 그렇다.

<h1>{number}</h1>
상태값은 {} 대괄호 안에 넣어서 관리한다.