React 16.8 이전 버전에서는 함수형 컴포넌트에서는 State를 관리할 수 없었다.
하지만 16.8 버전이 나오고 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 State를 관리 할 수 있게 되었는데 🎉 그중 하나가 바로 useState 함수이다.
앞선 포스트에서 useState를 사용한 State 예제를 다뤘었는데 좀 더 자세하게 알아보자!
(예제 코드는 여기서 확인이 가능하다!)
import React, { useState } from "react";
const UseStateTest = () => {
const [number, setNumber] = useState(0);
const Increase = () => {
setNumber((prev) => prev + 1);
};
const Decrease = () => {
setNumber((prev) => prev - 1);
};
return (
<>
<h1>현재 값 : {number} </h1>
<button onClick={Increase}>+</button>
<button onClick={Decrease}>-</button>
</>
);
};
export default UseStateTest;
import React, { useState } from "react";
useState 함수를 import 한다.
const [number, setNumber] = useState(0);
이 코드가 의미 하는 것은 다음과 같다.
const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);
const Increase = () => { setNumber((prev) => prev + 1); };
Increase라는 함수는 상태 갱신 함수인 setNumber를 이용하여 파라미터로 전달받은 prev를 1 증가시켜준다.
사실 앞 포스트에서는 setNumber(number+1);
이런식으로 작성했었는데 위의 코드 처럼 작성하면 상태 값 변경을 배치(batch)로 처리한다고 한다.
따라서 위와 같이 setNumber(prev => prev + 1);
형식으로 쓰는것이 안전하다.
참고
import React, { useState } from "react";
const UseStateTest = () => {
const [name, setName] = useState('');
const onChange = (e) => {
setName(e.target.value);
};
return (
<>
<input onChange={onChange} />
<h1>제 이름은 {name}입니다.</h1>
</>
);
};
export default UseStateTest;
useState 함수를 이용해서 한 컴포넌트에 여러개의 State를 생성하는 것도 가능하며 위의 예제 처럼 숫자가 아닌 다른 형태의 값도 State로 생성이 가능하다.