1-3 React Hooks - useState

useState
가장 기본적인 hook
함수형 컴포넌트 내에서 가변적인 상태를 갖게 함
카운터, Todolist등을 만들었다.

const [state, setState] = useState(초기값);

함수형 업데이트

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

function App() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <div>Number State: {number}</div>;
      <button
        onClick={() => {
          //기존 업데이트
          // setNumber(number + 1);

          //함수형 업데이트
          setNumber((currentNumber) => {
            return currentNumber + 1;
          });
        }}
      >
        누르면 UP
      </button>
    </>
  );
}

export default App;

세번 반복해서 업데이트를 해보자.

기존 업데이트방식에서 세번 반복

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

function App() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <div>Number State: {number}</div>;
      <button
        onClick={() => {
          setNumber(number + 1);
          setNumber(number + 1);
          setNumber(number + 1);
      >
        누르면 UP
      </button>
    </>
  );
}

export default App;

 

1씩 오른다.

함수형업데이트 방식을 세 번 반복하면

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

function App() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <div>Number State: {number}</div>;
      <button
        onClick={() => {
          setNumber((currentNumber) => {
            return currentNumber + 1;
          });
          setNumber((currentNumber) => {
            return currentNumber + 1;
          });
          setNumber((currentNumber) => {
            return currentNumber + 1;
          });
        }}
      >
        누르면 UP
      </button>
    </>
  );
}

export default App;

3씩 오른다. 

렌더링이 잦다는것은 성능에 이슈가 있으므로 좋은것이 아니기때문에 이러한 불필요한 렌더링을 피하기위해
리액트에서는 배치업데이트(기존 업데이트방식)를 적용한다.

 

함수형 업데이트에서는 currentNumber를 받아서 거기에1을 더하고 또 currentNumber를 받아서 거기에 1을 더하고 또 currentNumber를 받아서 1을 더했기 때문에 세번의 렌더링이 일어나게 되었다고 볼 수 있다.