[React] useState 이해하기

useState 이해하기

• useState란?
• useState 사용 방법

---

useState란?

함수형 컴포넌트에서 사용하는 Hooks 중 하나입니다. React에서 동적인 변수를 state라고 부르는데 useState는 이름만 들어도 state를 사용한다는 느낌을 줍니다. HTML과 JavaScript를 이용한 페이지에서는 아래와 같이 변수를 수정하면 변수를 읽어 화면에 변한 변수를 띄워주었습니다.

let testNum = 3;

function add(){
	testNum +=3;
}

add라는 함수를 실행하면 testNum이 증가하여 화면에서 testNum을 띄워두었다면 3씩 증가하는 것을 볼 수 있었습니다.

하지만 React에서는 이러한 방식으로는 화면에서 변화를 볼 수 없습니다. 따라서 useState를 이용하여 state를 재정의 하여야 합니다.

---

useState사용 방법

import {useState} from "react";

const 컴포넌트 명 = ()=>{

	const changeFunc = ()=>{
    	상태를 재정의 하는 메서드 명(바꿀 값)
    }
	const [상태 명, 상태를 재정의 하는 메서드 명] = useState(초기값)
	return {
    	<div>
        	<div>{상태명}</div>
        	<button onClick={changeFunc}>바꾸기</button>
        </div>
    } 
}

useState는 위와 같이 사용을 합니다. useState()의 괄호 안에는 상태의 초기 값을 입력하면 왼쪽의 대괄호 안에 있는 `상태 명`의 값으로 지정됩니다. 대괄호 안의 오른쪽은 '상태 명'의 값을 변경하는 데 사용되는 메서드입니다. '상태를 재정의 하는 메서드'를 실행하면 상태의 값을 바꾸게 됩니다. 이러한 방법과 기존의 방법의 차이는 기존의 변수를 대입 연산자를 통하여 변경시킨다면 변수는 값을 바꾸지만 바뀐 상태를 다시 화면에 띄우는 랜더링이 발생하지 않아 화면상에는 변화가 없습니다. useState를 이용하여 값을 바꾼다면 값의 변화를 인지하여 재 랜더링이 되어 바뀐 값으로 화면에 출력됩니다.