[React-Hooks] useState 사용하기

useState 선언 방법

import { useState } from "react"; // useState 불러오기

const state = () => {
  const [ text, setText ] = useState('');
  // const [ 상태 값 저장 변수, 상태 값갱신변수 ] = useState(상태 초기 값);
}

1. 카운터 만들기

state.js

import React,{useState} from 'react';

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

App.js

import React from "react";
import State from "./hooks/state";

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

export default App;

 

실행화면

---

_(마이너스) 1 버튼 눌렀을 때

 

2.useState 여러 번 사용하기, 인풋 상태 관리하기

State2.js

import React,{useState} from "react";

const State2 = () => {
  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 type="text" value={name} onChange={onChangeName}/>
        <input type="text" value={nickname} onChange={onChangeNickname}/>
      </div>
      <div>
        <div>
          <b>이름 : </b> {name}
        </div>
        <div>
          <b>닉네임 : </b> {nickname}
        </div>
      </div>
    </div>
  );
}

export default State2;

App, js

import React from "react";
import State2 from "./hooks/State2";

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

export default App;

실행화면

---