[React]useState

useState는 리액트에서 가장 많이 쓰이는 훅이다.

기존 VanilaJs에서는 페이지를 이동할 때 html페이지를 항상 새로 불러와서 화면에 표시해주었다. 하지만 리액트에서는 이런식으로 하기보다는 바뀌는 부분만 렌더링을 새로 해서 효율적으로 화면에 표시해준다.

리액트에서 새로 렌더링이 되면 컴포넌츠의 최상단부터 다시 코드를 읽는다.

여기에서 문제가 발생하는데 변수를 선언해서 그 변수를 리액트에서 바꿔주면, 페이지가 렌더링이 될 때마다 변수를 새로선언하기 때문에 값이 초기화된다.

예시코드

function Main(){
    let a = 1
    function onClick(){
        a = a+1
    }
    return(
        <>
        <h1>A : {a}</h1>
        <button onClick={onClick}>클릭</button>
        </>
    )
}
export default Main

버튼이 클릭되면 a의 값에 a+1을 하여 화면에 표시해주는 함수이다.

하지만 아무리 클릭을 해도 렌더링 되지 않는데 렌더링 될 때마다 변수가 a=1로 재 선언되어 값이 바뀌지 않는다.

이를 해결하기 위해서 변수를 useState로 관리한다.

const [value, setValue] = useState(initialValue);

useState로 관리하는 값은 페이지가 렌더링되더라도 값이 초기화되지 않는다.

value는 관리할 변수, setValue는 변수의 값을 바꿔주는 함수인데 인자로 갖는 값의 로직에 따라 value를 바꿔준다.

initialValue에는 value의 초기값을 설정해준다.

useState를 통해 위의 프로그램을 수정해보면 다음과 같다.

function Main(){
    const [a , setA] = useState(0);
    function onClick(){
        setA(a +1)
    }
    return(
        <>
        <h1>A : {a}</h1>
        <button onClick={onClick}>클릭</button>
        </>
    )
}

a와 setA를 배열로 묶어 state로 선언하고 초기값을 0으로 저장해주었다.

처음엔 0이었던 값이

클릭하면 A의 값이 정상적으로 바뀌는 것을 확인할 수 있다.