[React] useState

useState함수를 통해 바뀌는 값을 관리할 수 있다.

카운터에서 버튼을 클릭했을때, 실행되는 함수를 작성해보자.

function Counter() {
    const [number, SetNumber] = useState(0);

    const OnIncrease = () => {
        SetNumber(number+1);
    }
    const OnDecrease = () => {
        SetNumber(number-1);
    }
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={OnIncrease}>+1</button>
            <button onClick={OnDecrease}>-1</button>
        </div>
    )
}

💥여기서 주의해야할 점은 <button onClick={OnIncrease}>에서 <button onClick={OnIncrease}()>처럼 함수를 호출해버리면 안된다. 그렇게 되면 컴포넌트가 렌더링될때 호출이 되어버린다. 우리는 클릭되었을때 함수를 호출하고 싶은거지, 렌더링 되었을때 호출하고 싶은게 아니기 때문이다. 함수 타입의 값만 넣어주자!

---

컴포넌트에서 동적인 상태를 작동시키고 싶으면 먼저 해줘야할 초기 단계는 아래와 같다.

import React, { useState } from 'react';

function Example() {
  // ...
}

그럼 리액트에서의 useState라는 함수를 불러와준다.

기본 구조: const [number, setNumber] = useState(0);

✔number라는 상태를 만들건데 이상태의 기본값(=초기값)은 0으로 하겠다!(기본값 설정은 본인 마음대로 해주면 된다) setNumber는 이상태를 바꿔주는 함수(업데이트해주는 함수)이다.

number 변수의 값을 갱신하려면setNumber를 호출하면 된다.

기본 구조는 구조분해할당의 일환이고, 아래 코드와 같은 의미다.

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

Counter버튼을 눌러 onClick 이벤트를 실행시키면 setCount의 초기 변수에 1을 더하는 함수가 실행돼서 count는 1이 더한 수로 갱신된다.