[React] useState

카운터 예제로 알아보는 useState

App.js

import "./styles.css";
import Counter from "./counter";

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

export default App;

Counter.js

import React from "react";

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

export default Counter;

지금은 현재 버튼을 눌러도 아무런 작동을 하지 않는다.
이것을 상태로 바꿔서 버튼을 누를 때 마다 현재 보이는 값이 변하도록 hooks 중 useState를 사용하여 수정해보도록 하자.

import React, { 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 }를 적어 사용하게끔 해놓고, const [number, setNumber] = useState(0);를 통해서 상태의 초기값을 정하고, 이것을 함수에서 활용해서 상태값 업데이트를 할 수 있다.

컴포넌트 성능 최적화 로직

import React, { useState } from "react";

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

  const increase = () => {
    setNumber((prevNumber) => prevNumber + 1);
  };
  const decrease = () => {
    setNumber((prevNumber) => prevNumber - 1);
  };

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

export default Counter;

아직 컴포넌트 성능 최적화가 무엇인지 잘 모르지만 함수에서 상태 업데이트를 할 때 setNumber(number + 1) 보다 위처럼 적어주는 것이 컴포넌트 성능 최적화에 더 효과적이라고 한다.
결과값을 똑같다.