useState는 가장 기본적인 Hooks 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

함수형 컴포넌트에서 상태를 관리해야 한다면 Hooks 를 사용하면 된다.

• counter.js

import React, { useState } from react;

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

export defualt Counter;

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

useState 의 parameter에는 state의 기본값을 넣어준다.
이 함수가 호출되면 '배열'을 반환하는데 그 배열의 첫 번째 원소는 상태 값,
두 번째 원소는 상태를 설정하는 함수이다.

이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링된다.

useState 여러 번 사용하기

• Info.js

import React, { useState } from 'react';

const Info = () => {
 const [ name, useName ] = useState('');
 const [ nick, useNick ] = useState('');
 
 const onChangeName = (e) => {
  setName(e.target.value);
  };
  
  const onChangeNick = (e) => {
   setNick(e.target.value);
  };
  
  return ( 
   <div> 
    <div> 
     <input value={name} onChange={onChangeName} />
     <input value={nick} onChange={inChangeNick} />
    </div>
    <div>
     <b>이름 : {name} </b>
    </div>
    <div>
     <b>닉네임 : {nick} </b>
    </div>
   );
  };
  
  export default Info;