useState

useState는 함수형 컴포넌트에서 상태를 관리할 때 사용하는
Hooks 문법 중 하나이며 가장 많이 사용됩니다
특히 컴포넌트에서 보여줘야할 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 사용합니다

useState사용 없이 함수 사용하는 방법

function Counter() {
	const onIncrease = () => {
		console.log("+1");
	}

	const onDecrease = () => {
		console.log("-1");
	}

	return(
		<div>
			<h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
	)
}

함수를 선언 할 때는 function을 사용하기도 하지만 arrow function을 권장 하구요!
함수를 사용할 때는 eventListener = {함수명}으로 사용 합니다!
주의! 함수명을 입력하되 호출을 하시면 안됩니다!

<button onClick={onIncrease}>+1</button>
<button onClick={onIncrease()}>+1</button>

두 번째 라인처럼 함수명() 이렇게 작성하게 되면
사용을 하지도 않았는데 렌더링할 때호출이 되기 때문에 주의하셔야 됩니다!
HTML에서는 함수명()하여 선언하였지만
React에서는 HTML이 아니라 JSX로 기본이 JS 코드이기 때문에
함수를 사용할 때도 단순히 함수명만 작성 해주시면 됩니다!

useState

import React, { useState } from 'react';

export default function Counter() {
	const [number, setNumber] = useState(0);

	const onIncrease = () => {
		setNumber(number + 1);
	}
    
	const onDecrease = () => {
		setNumber(number - 1);
	}
    
	return(
		<div>
			<h1>{number}</h1>
			<button onClick={onIncrease}>+1</button>
			<button onClick={onDecrease}>-1</button>
		</div>
	)
}

useState를 사용하기 위해서는 import를 같이 해주셔야 됩니다!
useState를 사용하는 방법은 크게 두가지 방법이 있는데요!
위에 작성한 방법이 가장 보편적으로 사용하는 비구조할당 방법이라고 볼 수 있습니다!
const [변수명, 상태를바꿀함수명] = useState("변수에저장할기본값");
이렇게 선언을 하여 사용합니다!
여기서 변수명은 저희가 값을 불러올 때 사용하구요!
함수명은 변수의 값을 바꿀 때 사용합니다!

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

useState는 기본값과 값을 변경하는 함수를 배열로 할당 됩니다!
그래서 첫번 째 값은 기본 값을 가진 변수구요!
두번째 값은 기본 값을 변경하는 함수 입니다!

함수형 업데이트

useState를 사용할 때 함수형 업데이트를 함께 사용하여 최적화를 해주는데요!
useState의 set함수에 다음 업데이트 하고 싶은 값을 넣어 줬다면
값을 넣어주는 대신에 이 값을 어떻게 하고 싶은지에 대한
로직을 정의하는 함수를 넣어 줄 수도 있습니다!
간단히 "현재 상태를 가져와서 이렇게 하겠다"라고 생각하시면 됩니다!

const onIncrease = () => {
	setNumber(prevNumber => prevNumber + 1);
}
    
const onDecrease = () => {
	setNumber(n => n-1);
}    

여기서의 prevNumber과 n이 가리키는 값은 변수인 number이며
이름은 아무렇게나 지정을 하셔도 되구요!
"변수 값을 => 이렇게 사용하겠다" 라고 선언하는 방법 입니다!
코드가 더 긴것 같은데라고 느껴지시죠!
이건 코드의 길이를 중요시 여기기 보다 로직을 직접적으로 선언해줌으로서
따로 코드를 이해할 필요 없으니 실행될 때 도 좋겠죠!