useState 사용법

function Count() {
    const [count, setCount] = useState(0);
    
    function add() {
    	setCount(count + 1);
    }
    
    function sub() {
    	setCount(count - 1);
    }
    
    return (
    	<>
          <button onClick={add}>+</button>
          {count}
          <button onClick={sub}>-</button>
        </>
    )
}

 

위 코드는 useState를 사용한 간단한 counter이다.

 

useState의 인자는 default로 설정하고 싶은 값을 넣으면 된다.

useState를 받는 변수는 배열의 형식이어야 하고 앞은 state로 사용할 변수명을, 뒤는 그 변수의 setter를 선언한다.

(count의 setter라 setCount라 함수명을 선언하였지만 potato, tomato 등 원하는 함수명을 넣어줘도 상관은 없다)

setCount의 인자로는 새로이 변경할 값을 넣어준다.

 

최종적으로는 +나 - 버튼을 누를 때마다 setCount를 통해 count의 값이 변경되고 count가 변경될 때마다 해당 컴포넌트가 리렌더링되면서 count의 값이 실시간으로 바뀌는 것을 볼 수 있다.