벨로퍼트님의 게시글을 보며 정리하였습니다.
출처: https://velog.io/@velopert/
useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하시면 됩니다.
//class형 컴포넌트
constructor(){
super();
this.state={
id: 0,
name: '',
place: {}
}
}
//함수형 컴포넌트
const [id, setId] = useState(0),
const [name, setName] = useState(''),
const [place, setPlace] = useState({});
state의 여러가지 상태값을 지정해줬다면
useState에서는 하나의 함수는 하나의 상태 값만 관리를 할 수 있기 때문에 만약에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러번 사용하시면 됩니다.
const [state, setState] = useState(initialState)
상태 유지 값(state)과 그 값을 갱신하는 함수(setState) 를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.
import React, { useState } from "react";
export const Counter = () => {
const [value, setValue] = useState(0);
return (
<div>
<p>현재 값은 {value} 입니다.</p>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue(value - 1)}>-1</button>
</div>
);
};
초기 상태값은 0이고 +1이나 ,-1 버튼을 누를때마다 value 값이 변한다.