React State란

React State는 React 컴포넌트에서 관리되는 상태 값이다. 컴포넌트의 state 값이 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 변경된 값이 화면에 반영된다.

state는 클래스형 컴포넌트와 함수형 컴포넌트에서 모두 사용할 수 있다. 클래스형 컴포넌트에서는 this.state 객체를 사용하여 state값을 관리하며, setState메서드를 사용하여 state 값을 업데이트 한다. 함수형 컴포넌트에서는 useState 훅을 사용하여 state 값을 관리하며, setState 대신에 반환된 setter 함수를 사용하여 state 값을 업데이트한다.

React State는 컴포넌트는 컴포넌트의 내부에서만 유효하다. 따라서 state 값은 해당 컴포넌트에서만 사용되어야한다. 만약 여러 컴포넌트에서 공유해야 하는 값을 관리해야 한다면, 해당 값은 상위 컴포넌트에서 props로 전달되어야한다.

import React, { useState } from 'react';

const Counter = () => {
  	// setCount -> setter의 역할
	const [count, setCount] = userState(0);
  	
  	const handleIncrement = () => {
    	setCount(count + 1);
    }
    
    const handleDecrement = () => {
    	setCount(count - 1);
    }
    
    return (
      	<div>
      		<h1>Counter</h1>
      		<p>{count}</p>
      		<button onClick={handleIncrement}>Increment</button>
			<button onClick={handleDecrement}>Decrement</button>
      	</div>
    );
};