[React] hook : useState

useState

함수 컴포넌트에서 가변적인 상태를 가지게 해준다.

//기본형태
const [state, setState]= useState(initialState);

import React, { useState } from "react";

const Counter = () => {
  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;

함수형 업데이트

//함수형 업데이트
setState{(currentNumber)=>{return currentNumber+1}};

여러개 사용하기

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 (
    <>
      <Stwrap>
        <>
          <StInput boxWidth="200px" value={name} onChange={onChangeName} />
          <StInput
            boxWidth="200px"
            value={nickname}
            onChange={onChangeNickname}
          />
        </>
        <>
          <b>이름:</b> {name}
        </>
        <>
          <b>닉네임:</b> {nickname}
        </>
      </Stwrap>
    </>
  );
};

+추가개념

e.target.value 란?

e.target은 특정 이벤트가 발생하는 태그로

위의 코드에서 e.target은 input을 의미하고

e.target.value는 input에 입력되는 값을 의미한다!