[React] useState 를 이용한 상태관리

리액트에서 컴포넌트의 상태를 관리하기위해 useState라는 훅을 사용한다.

 

사용법

1. Import

import {useState} from "react"

먼저 상단에 위와같은 코드를 사용해서 useState라는 Hook을 사용할 수 있게 import한다.

 

2.  정의

const [state,Setstate] = useState("")

컴포넌트의 상태를 만들어주려면 위와같은 형태로 함수내부에 스테이트를 정의 해주면된다. 

const [바꿀스테이트 , 스테이트를바꿔주는 함수] = useState(초기값)

배열의 첫번째인자는 스테이트로 사용할 변수를 적고, 배열의 두번째 인자로는 스테이트를 변경할 함수를 적게되는데 state값을 state를 바꿔주는 함수없이 임의로 바꿀경우 오류를 일으킬수 있으니, 반드시 상태는 상태관리용 함수를 이용해서 변경해준다.

 

 

state 이름짓는법

const [age, setAge] = useState(18)

const [height,setHeight] = useState(180)

state와 state함수의 이름을 마음대로 지정해줄 수 있지만, 개발자간의 약속으로 첫번째 인자로는 상태의 이름, 두번째인자에는 상태의 이름 앞에 set이라는 키워드를 이용해 선언해준다

 

3. State 변경

setState(바꿀값)

사용법으로는 setState함수를 호출해서 상태값을 바꿔주면된다. 내부에 함수, 배열, 오브젝트등 다양한 자료형을 넣을 수 있고, 이를 이용해 다양한 자료를 가져올 수 있다.