React - useState

📌 목차

• Introduction
• useState
• useState call back function
• Conclusion

📌 Introduction

안녕하세요. 오늘은 드디어 react hooks중 하나인 useState에 대해서 알아보겠습니다.

📌 useState

간단하게 counter를 만들어 보겠습니다.

useState(arg) // useState안에 인자는 초기 값을 설정합니다.

const [number, setNumber] = useState(0); 
// 그리고 array를 반환하게 되는데 첫번째 인덱스는 값, 두번째 인덱스는 number를 설정하는 함수를 반환합니다.

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
}

export default Counter;

📌 useState call back function

위에서 setNumber는 이렇게 사용이 가능해요.

const onIncrese = () => {
    setNumber(prevNumber => prevNumber + 1); 
}

이렇게 설정을 하는 이유는 최적화를 위해 이렇게 사용을 하곤 합니다.

📌 Conclusion

오늘은 useState에 대해서 한번 알아보았습니다. vue3에서도 이와 비슷하게 reactive라던지, ref같은 것들이 나왔는데 실제로 react에서 사용을 해보니 vue 개발자들이 어디에서 영감을 받았는지 좀더 명확하게 알 수 있엇던 계기가 되었던거 같아요. 그럼 다음 포스팅에서 만나요~~!