왜 변수를 그대로 쓰지 않고 useState로 써야 할까?

먼저, useState()는 REACT hooks 중 하나로 컴포넌트에서 바뀌는 값을 관리하는 함수이다.

리액트 컴포넌트에서 동적인 값을 상태(state)라고 부르는데,
사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태 관리가 필요하다.

직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않게 되고, setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하게 된다.

예제를 살펴보자면,

일반 변수를 사용한 경우

import React from 'react';

const Counter = () => {
  let count = 0;

  const increment = () => {
    count += 1; // 변수를 직접 변경
    console.log('Current count:', count);
  };

  return (
    <div>
      <h1>Counter</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

useState()를 사용한 경우

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // useState로 상태와 상태 변경 함수를 정의

  const increment = () => {
    setCount(count + 1); // 상태 변경 함수를 사용하여 상태를 업데이트
    console.log('Current count:', count);
  };

  return (
    <div>
      <h1>Counter</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

변수를 그대로 사용하면 변수 count를 그대로 사용하여 클릭할 때마다 값을 1씩 증가시키고 콘솔에 출력하게 된다.
하지만 이렇게 하면 상태의 불변성을 유지하지 못하는데, 컴포넌트의 상태를 변경할 때 React는 상태의 불변성을 유지하면서 새로운 상태로 업데이트 해야 한다.

그러나, useState를 사용하여 count라는 상태와 그 상태를 변경할 수 있는 setCount라는 상태 변경 함수를 정의하게 되면, React는 새로운 상태로 컴포넌트를 다시 렌더링하며, 상태의 불변성을 유지할 수 있다.

사실 이유를 찾아보며 궁금한 것이 있었다.

도대체 왜 불변성을 유지해야 할까?

state 가 변하면 생기면 html도 자동으로 재렌더링을 한다는 점을 알면 좋을 것 같다.

1. 효율적인 업데이트 감지
   React는 Virtual DOM을 사용하여 UI 업데이트를 처리한다. 이를 위해 React는 이전 상태와 현재 상태를 비교하여 변경된 부분만을 실제 DOM에 업데이트하는데, 상태의 불변성을 유지하면 상태가 변경된 부분을 정확하게 감지할 수 있으므로 React는 필요한 최소한의 DOM 변경만 수행할 수 있다. 불필요한 리렌더링을 방지하는 역할!

2. 예측 가능한 상태 변화
   상태의 불변성을 유지하면 상태가 언제, 어디서, 어떻게 변경되는지를 명확하게 추적할 수 있다. 상태가 불변하면 상태의 변경을 추적하기 쉽고, 디버깅 및 테스트를 단순화할 수 있다. 결론적으로, 상태의 불변성을 유지하면 예측 가능한 상태 변화를 유지할 수 있어 애플리케이션의 유지 보수성과 신뢰성을 향상시킬 수 있다.