setState, useState

State

상태관리에 대해 알아보자.

 

다음과 같이 count 변수를 선언하고

버튼을 클릭하면 숫자가 올라가게끔 구현하고싶다. 

다음과 같이 작성하면 버튼을 클릭할때마다 count 의 숫자는 올라가고있지만 화면이 리렌더링되지않아

화면에서는 숫자가 올라가는것을 확인할 수 없다.

숫자를 더할때마다 render함수를 함께 호출하는 방법도 있지만 그닥 좋은 방법은 아니다.

    const root = document.getElementById("root");
    let count = 0;

    function plusCount() {
        count++;
    }
    
    const App =  (
        <>
           <span>count : {count}</span>
           <button onClick={plusCount}>click me!</button>
        </>

    );

    ReactDOM.render(<App />, root);

 

 

이러한 불편함을 해결해주는 기능이 바로 useState이다.

useState를 사용하면 컴포넌트 내에서 변경 가능한 데이터를 저장하고 업데이트할 수 있다. 

아래 코드를 보면, data 변수를 생성했고 초기값0을 설정했다. 

setDate는 함수이다. 이 함수를 통해 data 변수의 값을 변경할 수 있고 값이 변경되면 react는 화면을 리렌더링한다.

react는 바닐라JS처럼 모든화면을 다시 렌더링하지않고

바뀐 부분만 리렌더링한다. 

 

setDate함수안에서 data변수를 직접 가져와서 업데이트하는 방법도 있지만

안전한 데이터 업데이트를 위해 ( 어디선가 예상치못한 업데이트가 일어나는 경우가 있을 수 있기에 ... )

다음과같이 함수를 통해 현재의 변수를 업뎃하는 방법을 권장한다. 

function App (){
    const [data, setDate] = React.useState(0);

    function plusdata() {
        setDate((current) => current+1);
    }

    return (
        <>
            <span>count : {data}</span>
            <button onClick={plusdata}>click me!</button>
        </>
    )
}