[react] useState

진짜 드디어 useState가 왔다.

react의 useState는 Vue Composition API의 ref와 거의 같은 역할을 한다.

import { useState } from "react";

export default function Text() {
    const [text, setText] = useState("기본값입니다.");

    const handleButtonClick = () => {
        setText('수정된값');
      };

      return (
        <div>
          <div>{text}</div>
          <button onClick={handleButtonClick}>수정</button>
        </div>
      );
}

useState는 Array Destructuring를 사용하여 변수에 할당할 수 있다.

첫번째 변수 text는 상태값을, 두번째 변수 setText는 해당 상태값을 갱신시키는 함수이다.

일반적으로 2번째 변수는 첫번째 변수에 set 접두사를 붙여서 짓는다고 한다.

이걸 보면서 진짜 Vue가 react를 많이 참고했구나 라는 생각이 들었다.