useState❓

useState

함수형 컴포넌트 내에서 상태(state)를 관리할 수 있게 해주는 Hook!
클래스형 컴포넌트에서 this.state와 this.setState를 사용하여 상태를 관리하는 것과 같은 기능을 제공하지만, 함수형 컴포넌트에서 더 간단하고 직관적인 방식으로 상태를 관리할 수 있다.

---

설명

useState(초기값)은 상태 변수(num)와 상태 업데이트 함수(setNomber)를 반환
num: 상태 변수로, 컴포넌트 내에서 관리되는 값입니다.
setNomber: 상태를 변경하는 함수로, 이 함수를 호출하여 num 값을 업데이트합니다.
useState의 매개변수로 전달되는 값은 상태의 초기값입니다. 위 예제에서는 0을 초기값으로 설정

비동기성

setState처럼 useState로 업데이트된 상태는 비동기적 즉, 상태 업데이트가 바로 반영되지 않고, React가 리렌더링 후에 새로운 상태 값을 적용한다.

예시

기본 셋팅은 아래와 같다.

import React, {useState} from "react";
상단에 useState를 추가해준다함수기에 {} 안에 작성

const [num,setNomber]= useState(0); 를 셋팅
num은 0이라는 기본값을 가지는 변수며, const num = 0 << 와 동일
setNomber는 세트 함수이며, 0이라는 초기값을 num에 넣고 이 값을 변경시키기 위해 setNomber를 넣어준다.

const Counter = ()=> {
	const [num,setNomber]= useState(0);
	return(
		<div>
			<button>+1</button> // 증가버튼
			<button>-1</button> // 감소버튼
			<p></p> // 숫자 표시
		</div>
	)
}

클릭시 실행할 함수인 plus 를 넣어주고
const plus = ()=> {
setNomber(num+1);
//0 = num + 1 과 동일하다.
}

버튼에 호출할 함수를 셋팅

<button onClick={plus}>+1</button>

💥 react 에서는onClick 꼭 대문자를 써야한다.

	return(
		<div>
			<button onClick={plus}>+1</button>
			<button>-1</button>
			<p>{num}</p> // << 여기에 변수인 num를 넣어준다. 
		</div>
	)

감소도 동일하게 해주면 완성된 코드는

import React, {useState} from "react"; //1.먼저 호출

const Counter = ()=> { 
	const [num,setNomber]= useState(0); //2.num변수를 선언하고 setNomber셋함수 셋팅
	const plus = ()=> {
		setNomber(num + 1); // 3. 버튼을 누르면 num변수에 1씩  증가
	}
	const minus = ()=> {
		setNomber(num - 1);// 4. 버튼을 누르면 num변수에 1씩 감소
	}
	return(
		<div>
			<button onClick={plus}>+1</button> // 증가 함수 넣고
			<button onClick={minus}>-1</button> // 감소 함수 넣고
			<p>{num}</p> // 보여줄 변수까지 넣어준다.
		</div>
	)
}

export default Counter; // 마지막 불러와주면.

기본인 0에서

증가를 누르면

감소를 누르면 (2번눌러봄)

이쁘게 완성된 아이를 볼 수 있다.

---

정리

리액트에서 동적인 값을 관리할때 1useState1를 사용한다.
[변수명,set함수]= useState(초기값);
1. 초기값 변수명을 선언하고
2. 두번째 배열에서 변수에 대한 세트 함수 셋팅한다.
3.셋함수를 통해서 변경을 해야 상태 관리가 되며 그 값이 동적으로 값이 반영이 된다.