<aside> 🔥 공식 문서

</aside>

<aside> 🔥 useState?

함수 컴포넌트에서 상태를 관리하기 위해 사용하는 Hook

기본 작성 방법

const [value, setValue] = useState(0);

</aside>

<aside> 🔥 카운트 +1 -1하는 예제 만들기

import React, { useState } from "react";

function Counter(props) {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
}

export default Counter;

</aside>

<aside> 🔥 useState 2개 사용

import React, { useState } from "react";

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

</aside>