1. useState()란?
리액트 컴포넌트에서 동적인 값을 상태(State)라고 부르고, 사용자 인터랙션을 통해 컴포넌트 상태 값이 동적으로 바뀔 때는 상태관리가 필요하다. 리액트 훅이 나오기 전까지는 클래스 기반의 컴포넌트를 사용하여 상태값을 관리하였는데, 이렇게 관리를 하면 유지보수에 불편함이 있었다.
하지만 리액트 16.8 버전 이후로 훅(Hooks)이라는 기능이 도입되면서 함수형 컴포넌트에서도 상태관리를 할 수 있게 되었고, 이때 사용하는 함수가 useState() 함수다.
2. useState() 사용법
import React, { useState } from "react"
export default function Count(){
const [count, setCount] = useState(0);
const increase = () =>{
setCount(count + 1);
}
const decrease = () =>{
setCount(count + 1);
}
return(
<>
<div>
<p>{count}</p>
<button onClick={increase}>increase</button>
<button onClick={decrease}>decrease</button>
</div>
</>
)
}
먼저, useState()를 사용하기 위해서는 위 코드와 같이 import React, { useState } from "react"를 이용하여 import를 통해 리액트 패키지에서 useState() 함수를 불러온다.
const [현재 상태 값, 상태 값을 변경할 함수(Setter)] = useState(초기 상태 값);
이후 const [count, setCount] = useState(0); 코드를 통해 useState() 함수를 호출해서 사용하는데, 함수가 반환하는 배열 첫 번째 원소인 count는 현재 값의 상태를 나타내는 변수이고 두 번째 setCount변수는 상태값을 업데이트할 때 사용하는 Setter함수이다. 마지막으로 useState()에 들어가는 값은 해당하는 useState의 초기 상태 값을 나타낸다.
const increase = () =>{
setCount(count + 1);
}
setCount는 매개변수로 전달 받은 값으로 State, 즉 count의 값을 업데이트해 준다.
위의 코드의 setCount(count + 1)를 실행하게 되면 현재 count값이 1이라고 가정했을 때 count값은 1에서 2로 업데이트되고 useState의 값이 업데이트되면 화면이 렌더링 된다.
'React' 카테고리의 다른 글
[React] 리액트(React.js) 설치 및 시작하기 (Window) (0) | 2022.12.08 |
---|---|
[React] 리액트(React.js) 가볍게 알아보기 (0) | 2022.12.06 |