useState란 무엇인가?

React 개발 시 함수형 컴포넌트를 사용한다면 React Hooks기능을 활용할 수 있습니다.

여기서 가장 중요한 useState를 알아보겠습니다.

 

useState란? 

: 함수형, 클래스형 컴포넌트의 상태를 관리하거나 변경할 수 있도록 도와주는 React Hook입니다.

useState는 초기 입력될 상태 값을 인자로 받아 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환하게 됩니다.

 

형태는 이와 같습니다.

const [state, setState] = useState(초기값);

state는 저장된 값이고, useState( ) 안의 인자값을 가지게 됩니다.

setState는 state의 변경된 값을 저장할 수 있게 만들어 줍니다.

 

setState를 사용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 랜더링 하게 됩니다.

 

예시

import {useState} from "react";

function App() {
	const [number,setNumber] = useState(0);
    
    const handleClick = () => {
    	setNumber(number + 1)
    }
    
    return (
   	<div>
    	<span>{number}개</span>
        <button onClick={handleClick}>추가하기</button>
   	</div>
    );
}


export default App;

만약 이런 예시 코드를 작성한다면

 

이런식으로 추가하기 버튼을 클릭할 때마다 number값에 +1을 하게 되고 그 값이 <span>테그 안의 {number}값에 랜더링하게 됩니다.