React의 useState 알아보기.

리액트 공부를 하던 중

 

const Counter = () => {

    const [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

이러한 형태의 카운터를 구현해보았다.

 

내 지식에 의하면 count + 1 이나 count++이나 같다고 생각하고

위 예제를 count++로 바꾸어보았다.

 

WARNING in src\Counter.js
  Line 8:18:   'count' is constant  no-const-assign
  Line 12:18:  'count' is constant  no-const-assign

이러한 워닝이 나왔다. 당연하다. count는 const 로 선언해놨으니 당연히 변경될 수 없다.

그래서 let으로 변경해보았다.

 

const Counter = () => {

    let [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count++);
    }

    const onDecrease = () => {
        setCount(count--);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

동작은 하는데 두번을 클릭해야 화면에 카운터가 올라갔다.

이게 무슨일이고 하면서 알아보았다.

 

---

++, -- 는 증감 연산자이다. 

즉 const count에  ++ 은 당연히 안된다.

let count에 +1 은 한번 늦게 반응한다.

const count + 1은 된다. 이게 왜 이렇게 되나 했는데.

setCount안에 count + 1 을 넣으면 단순히 숫자를 더하는게 아닌

count값에 count + 1값을 할당한 후 해당 컴포넌트를 재 랜더링 하는 구조였다.

 

let을 넣었을땐 화면이 재 랜더링 된게 아니라 +1을 한 후

한번 더 클릭했을때 함수를 호출하면서 페이지를 새로 그린거 같다.

 

플러터의 setState와 비슷한 개념이라고 보면 될 것 같다. 

리액트 네이티브 공부하면서 제대로 공부를 안했던거 같은데 이번 기회에 확실하게 집고 넘어가게 되었다.

 

혹시 이것도 잘못된 정보라면 댓글 남겨주시면 매우 감사하겠습니다.