UseState

리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState 라는 함수는 리액트의 Hooks 중 하나 이다.

---

useState 는 기본적으로 getter 와 setter 이다.
getter는 변수의 값을 가져오는데 이용하고,
setter는 변수의 값을 변경하는데 이용한다.
이것은 홈페이지 에서 유저의 상호작용이며, 함수에 의해 변경될수 있는 값을 지정하고 변경하는데 사용한다.
출처: https://ko-de-dev-green.tistory.com/15

---

useState 함수의 인자에 상태의 초깃값을 넣어준다.
함수형의 초깃값의 형태는 자유. ( 숫자, 문자, 객체, 배열 ..가능)
[배열의 첫번째 원소, 배열의 두번째 원소]

-> 배열의 두번째 원소 : 상태를 바꿔주는 함수. (Setter)

---

📌useState 사용전 import 해주어야함📌

ex) 예시1

import { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState(''); // 상태초기값
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히가세요!');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

출력 결과

• onClickEnter > 입장 < 클릭시 setMessage를 통해 상태변경.
  ('안녕하세요!') 라는 문자 출력.
• onClickLeave > 퇴장< 클릭시 setMessage를 통해 상태변경.
  ('안녕히가세요!') 라는 문자 출력.

---

ex) 예시2

import React, {useState} from 'react';

const Number = () => {
	const [number, setNumber] = useState(0);
    
    const counter = () => setNumber(number + 1);
    
    return (<div>
    			<button onClick={counter}>click</button>
                <div>{number}</div>
                </div>);
                }
   export default Number;

출력 결과

• useState(0) 초깃값 0으로 지정
• setNumber(number + 1); //setNumber 상태변화 (number + 1
  클릭시 +1 만큼 올라가게 한다.

이렇게 UseState 를 사용하여 , 하나의 수정으로 전체 페이지가
변경되는게 아닌 부분적으로 쉽게 수정 ( 유지보수 ) 할수 있게 되었다.