[React] Hook 👉 UseState

1. useState란?

useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.
즉, useState를 이용하면 컴포넌트에 상태값을 추가할 수 있습니다.

const [state, setState] = useState(initialState);
//    [상태값, 상태값변경함수] = useState(상태값의초기값)

• 상태 유지 값과 그 값을 갱신하는 함수(상태값 변경 함수)를 반환한다.
• 최초로 렌더링을 하는 동안 반환된 state는 parameter인 initialstate의 값과 동일하다.
• setState 함수는 새 state값을 받아 state를 갱신할 때 사용한다.
  • 다음 리렌더링 시에 useState를 통해 반환 받은 첫번째 값은 항상 갱신된 최신 state이다.

2. 사용하는 경우

함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 useState Hook을 이용하여 state를 사용할 수 있습니다.

3. 특징

• 항상 2개의 value를 return한다.
  -> 상태값, 상태값 변경 함수
  const [item, setItem] = useState(1);
• 아래의 코드로 하나의 value만 return할 수 있다.
  const item = useState(1)[0];
• 함수에서 사용할 때이다.
  incrementItem = () => setItem(item-1);

4. 예시

import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}