리액트 - useState()

useState() 함수

리액트 컴포넌트에서는 동적인 값을 상태(state) 라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태의 관리가 필요하다.

React Hook이 나오기 전에는 상태값 관리를 위해 class기반의 컴포넌트를 작성하여야 했다.
하지만 클래스형 컴포넌트는 함수형에 비해 복잡했다.

하지만 Hooks 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할수 있게 되었다.

useState() 함수 사용법

• import React, { useState } from "react"

  리액트 패키지 안에서 함수를 불러온다.

• const [number, setNumber] = useState(0)

  useState 함수를 호출하면 배열을 반환한다. 1번째 원소인 number은 현재 상태값 변수이고, 두번째 원소 setNumber은 상태값을 갱신하는 Setter함수이다.

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

즉 useState 함수는 이와 같이 사용한다.

• {number}

  갱신된 현재 상태 값을 렌더링 해준다.

여러개의 input 상태관리하기 : https://react.vlpt.us/basic/09-multiple-inputs.html

출처 : https://react.vlpt.us/basic/07-useState.html

---