Q. useState가 뭐냐! (setState를 모르신다고 가정하고 문서가 작성됐습니다)

useState는 훅인데, 이 훅은 함수형 컴포넌트에서 스테이트를 쓸 수 있게 해줍니다.

일단 훅, 함수형 컴포넌트 등등 어려운 이야기가 나오는데,

1. 훅
2. 함수형 컴포넌트

훅이란, 함수의 일종으로서, 스테이트를 쓸 수 있는 형태의 함수 입니다. 원래는 함수는 pure 함수였지만, 함수에서 스테이트를 쓸 수 있도록 진화 한 형태죠.

함수형 컴포넌트는 class가 아닌 것이에요. 이게 뭐냐! 이러시면, constructor 같은 것도 필요 없고, this같은 것도 필요없는 아주 깔끔한 component에요. 아래 예시를 보면

const SomeFunctionalComponent = ({inputA, inputB}) => {
	return <>
		{inputA}, {inputB}
	</>
}

• inputA, inputB를 프린트 해주는 예제

이거 자체가 함수형 컴포넌트죠. 이 함수형 컴포넌트에서 버튼을 하나 만들고, 그 버튼을 누를 때마다 cnt값이 1이 늘어나는 기능을 넣고 싶다면,

• cnt라는 변수가 하나 필요하고,
• 버튼을 하나 추가 하고 그 버튼은 현재 cnt값을 1증가 시키는 기능

이 필요합니다. 이런 경우에 cnt는 단순한 변수가 아니라 state입니다. 한국말로는 상태!죠. 이 상태는 1씩 증가할겁니다. 그리고 증가가 되고 나면, 그 state를 사용하고 있는 함수가 다시 설정 됩니다 (전문용어로는 rerendering이라고 합니다)