[React/Hooks] useState에 대하여

 

 

1. useState()

---

• 함수형 컴포넌트에서 상태를 관리하기

2. 사용법

---

• 리액트 패키지에서 useState 함수를 불러온다
• import Ract, {useState] from ‘react’;
• useState함수 호출을 통해 배열을 반환시킨다
• const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);
• 상태 값 갱신 함수, setNumber 라고 지정해줬다고 치자. 여기엔
  • 업데이트 할 새로운 값을 넣어줄 수 있다. setNumber(number+1)
  • 기존 값을 업데이트 하는 함수를 넣어줄 수 있다. setNumber(preNum ⇒ preNum +1)

3. 예시

---

import React, {useState} from 'react';

function InputTest() {
	const [number, setNumber] = useState(0); // number에 초기 상태값으로 0을 저장시킴
	
	const onClick = () => { // 단순 클릭이 들어온다면, (파라미터로 들어 온 게 없으면)
		setNumber(preNum => preNum +1); }  // setNumber는 불러온 파라미터를 1증가시켜 내보낸다
	
	const onChange = (e) => {  // 특정 이벤트가 들어온다면, 해당 연결된 값으로 number를 update
		setNumber(e.tartget.value);
	};
	
	return (
		<div>
			<input onChange = {onChange} value={number} />
			<button onClick={onClick}> 1증가됨 </button>
			<div>
					<b> 바뀐내용: {number} </b>
			</div>
		</div>
	);
}

export default InputTest;