[React] useState

State

리액트를 사용하는 가장 큰 이유는 상태(State)에 반응(Reaction)을 하기 위해서이다.

 

즉, 변수 값이 업데이트되면 UI도 업데이트 해줘야 한다.

 

하지만 변수가 변경될 때마다 UI가 매번 변경된다면 엄청난 자원 비용이 발생한다.

 

그래서 리액트는 변수 변경이 아니라 UI가 변경되야할 때만 업데이트할 수 있도록 State 라는 걸 추가했다.

 

즉, 변수가 업데이트 된다해서 렌더링하지 않고, State가 업데이트 된다면 렌더링한다.

 

이 때 사용하는 함수가 useState이다.

 

 

useState()

컴포넌트 상태를 관리할 수 있는 함수다.

 

1. useState 함수 불러오기

import { useState } from 'react';

 

 

2. useState 사용하기

 

const [state, setState] = useState(initialState)

const [num, setNumber] = useState(0);

 

useState(초기값)

• 인자로 초기값을 넘겨준다. 

const [현재 상태 값, set 함수]

• useState()를 호출하면 배열을 반환하는데, 현재 상태와 다른 값으로 업데이트할 수 있는 set 함수를 반환한다.

주의사항

• Hook이므로 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있다.
• 반복문이나 조건문 안에서는 호출할 수 없다.
• Strict Mode에서 React는 의도치 않은 불순물을 찾기 위해 초기화 함수를 두 번 호출한다.

 

카운터 예시

import React, {useState} from 'react';

const Counter = () => {
    const [num, setNumber] = useState(0);
    const increase = () => {
        setNumber(num+1);
    }
    const decrease = () => {
        setNumber(num-1);
    }
    return (
        <div>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
            <p>{num}</p>
        </div>
    )
}

export default Counter;

 

 

참고

https://ko.react.dev/reference/react/useState