useState란?(React)

useState와 Hook

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태값과 여러 React의 기능을 사용할 수 있게됨
->Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수, 함수형 컴포넌트에서 상태값을 사용할 수 있고 자식요소에 접근할 수 있음

useState

• useState는 컴포넌트에서 state값을 추가할 때 사용됨. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어줌

• 하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있어 만약에 컴포넌트에서관리해야할 상태가 여러 개라면 useState를 여러번 사용해야함

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• const [count, setCount]
  useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게되면 전달받은 파라미터로 값이 바뀌고 컴포넌트는 정상적으로 리렌더링됨

• count는 state값을 의미

• setCount
  count값을 업데이트하는 함수. 클래스 컴포넌트에서의 this.setState는 이전 state와 새로운 state를 합치지만 얘는 이전 값을 덮어쓴다.

• useState(0)
  숫자 0은 초기값을 의미. useState는 인자로 초기 state설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 딱 한번 사용됨